.on eventlistener 适用于 firefox 但不适用于 IE 或 chrome答案

【问题标题】：.on eventlistener works for firefox but not on IE or chrome.on eventlistener 适用于 firefox 但不适用于 IE 或 chrome
【发布时间】：2014-11-29 00:47:11
【问题描述】：

让我直说吧，我在 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。我似乎不知道为什么。

提前致谢

【问题讨论】：

我已经编辑了您的问题以包含一个 sn-p。当我在 Chrome 或 IE 中运行 sn-p 时，事件会触发但 uiObj 未定义？
它是一个对象数组，我把它放在单独的文件中，显示整个代码会使事情看起来比实际复杂，所以我只展示了我认为相关的部分。我也在本地运行代码，但我仍然有同样的问题

标签： javascript css html firefox cross-browser

【解决方案1】：

尝试：

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>

【讨论】：

在我的情况下不是这样，事情是在实际文档中，变量是在不同的 javascript 文件中定义的，也许这就是原因，但我不明白的是为什么会这样然后在 Firefox 上运行

【解决方案2】：

大家好，我找到了解决办法

似乎占位符，即变量名 vup 在 chrome 和 IE 中不被读取为 mouseup。我不完全知道为什么，但是当我将事件侦听器更改为

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

    });

它似乎有效。

谢谢

【讨论】：