javascript - .on eventlistener适用于Firefox，但不适用于IE或chrome

让我直接说一下，我在html中有一堆控件，它们是：

var vup = 'mouseup';

$(document.body).on(vup, '.control_but', function(e)
{
    console.log(e.currentTarget.id);
    switch(e.currentTarget.id)
    {

        case 'pause_but':

            uiObj['player'].performAction('pause');
            break;
        case 'play_but':

            uiObj['player'].performAction('play');
            break;
        case 'prev_but':

            uiObj['player'].performAction('previous');
            break;
        case 'next_but':
            uiObj['player'].performAction('next');
            break;
        case 'repeat_but':
        case 'repeatAll_but':
            uiObj['player'].performAction('repeat');
            break;
        case 'shuffle_but':
            uiObj['player'].performAction('shuffle');
            break;
        default:
            break;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="controls_div">
            <img id="prev_but" class="control_but" src="media/prev.svg" alt="previous">
            <img id="play_but" class="control_but" src="media/play.svg" alt="play">
            <img id="pause_but" class="control_but hide" src="media/pause.svg" alt="play">
            <img id="next_but" class="control_but" src="media/next.svg" alt="next">
            <img id="repeat_but" class="control_but" src="media/repeat.svg" alt="repeat">
            <img id="repeatAll_but" class="control_but hide active_but" src="media/repeatAll.svg" alt="repeatAll">
            <img id="shuffle_but" class="control_but" src="media/shuffle.svg" alt="shuffle">
        </div>

我给他们分配了mouseup事件监听器，如下所示：

var vup = 'mouseup';

这在mozilla firefox中非常有效，但在chrome或IE上似乎无效。我似乎不知道为什么。

提前致谢

最佳答案

尝试：

var vup = 'mouseup';
    $(document).on(vup, '.control_but', function(e)
    {
    // rest of your code...

    });

     var vup = 'mouseup';

$(document).on(vup, '.control_but', function(e)
{
    console.log(e.currentTarget.id);
    switch(e.currentTarget.id)
    {

        case 'pause_but':
alert('pause_but');// only to show you
            uiObj['player'].performAction('pause');
            break;
        case 'play_but':
 alert('play_but');// only to show you
            uiObj['player'].performAction('play');
            break;
        case 'prev_but':
alert('prev_but');// only to show you
            uiObj['player'].performAction('previous');
            break;
        case 'next_but':
            uiObj['player'].performAction('next');
            break;
        case 'repeat_but':
        case 'repeatAll_but':
            uiObj['player'].performAction('repeat');
            break;
        case 'shuffle_but':
            uiObj['player'].performAction('shuffle');
            break;
        default:
            break;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="controls_div">
            <img id="prev_but" class="control_but" src="media/prev.svg" alt="previous">
            <img id="play_but" class="control_but" src="media/play.svg" alt="play">
            <img id="pause_but" class="control_but hide" src="media/pause.svg" alt="play">
            <img id="next_but" class="control_but" src="media/next.svg" alt="next">
            <img id="repeat_but" class="control_but" src="media/repeat.svg" alt="repeat">
            <img id="repeatAll_but" class="control_but hide active_but" src="media/repeatAll.svg" alt="repeatAll">
            <img id="shuffle_but" class="control_but" src="media/shuffle.svg" alt="shuffle">
        </div>