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

.on eventlistener works for firefox but not on IE or chrome

本文关键字：适用于 IE 不适用 chrome eventlistener Firefox on      更新时间：2023-09-26

让我直接进入这个，我在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>

我像这样为它们分配了鼠标向上事件侦听器： 

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>

大家好，我找到了解决方案

似乎占位符，即变量名称 vup 在 chrome 和 IE 中没有被读取为鼠标向上。我不知道为什么，但是当我将事件列表更改为 

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

它似乎有效。

谢谢

相关文章：