Question

我认为我有两个冲突的事件监听器，在我的js文件中，我有一个点击监听器，例如：

document.getElementById('sidebar').addEventListener('click', function(et) {
  et.preventDefault();

  var item = et.target.closest('.inner');
    if (item) {
    // etc.

检查在sidebar上的所有点击，如果所单击的项目是类别为.inner的项目，则执行某些操作。

现在，当我尝试在同一边栏中的列表项上设置悬停侦听器时：

$('.list-item').on('mouseenter', function(eee){
  console.log('entered');
}).on('mouseleave', function(eee){
  console.log('left');
});

它不起作用。例如，在徽标上放置相同的代码也可以正常工作。所以我认为这可能与上面显示的第一个代码冲突，是还是必须是其他？

已解决：

我是在页面加载1000ms之后使用setTimeout函数创建.list-item的，所以尽管我认为jquery .on方法有点像委托，但是setTimeout仍然能够使它混乱。

我现在将代码放置在timout中并且可以工作。

$(window).on('load', function(){

      setTimeout(function(){
        // other code

        $('.list-item').on('mouseenter', function(eee){
          console.log('entered');
        }).on('mouseleave', function(eee){
          console.log('left');
        });
      },1000);

});

Javascript事件侦听器冲突问题

0 个答案: