Question

我想在点击时切换添加/删除事件侦听器。有人可以指出我如何改进我的代码吗？

我在Stackoverflow上阅读了很多答案，但没有人帮助过我。

这是一种学习工具，将指针悬停在显示的数字上会使中心立方体旋转显示相同的数字。

当页面加载时，事件监听器被添加到中心立方体中，我写了一个小jQuery来向任何单击的多维数据集添加监听器，这样它们也将显示指针悬停的数字。

适用于Chrome，适用于Opera。 FF认为它的萨尔瓦多·达利和IE ......呃！

页面加载时添加了事件监听器

var thisCube = '.two';
var init = function() {
  var box = document.querySelector(thisCube).children[0],
      showPanelButtons = document.querySelectorAll('#hover-change li'),
      panelClassName = 'show-front',

      hover = function( event ){
        box.removeClassName( panelClassName );
        panelClassName = event.target.className;
        box.addClassName( panelClassName );
      };

  for (var i=0, len = showPanelButtons.length; i < len; i++) {
    showPanelButtons[i].addEventListener( 'mouseover', hover, false);
  }

};

window.addEventListener( 'DOMContentLoaded', init, false);

jQuery添加新的侦听器

$('.one, .three, .four, .five, .six, .seven, .eight, .nine').click(function() { 
    thisCube = $(this).data('id');
    init();
});

我确定我没有正确添加事件监听器，因此当我阅读其他解决方案时，这会给我带来麻烦。

我没有为这篇文章建立一个jsfiddle，因为发布所有相关代码的新规则会使这篇文章过于庞大。如果有人想在jsfiddle上看到它请问。

Built on this demo

- 编辑 -

我尝试添加此代码以添加类rotate，如果元素已经包含该类，则删除rotate并删除事件侦听器。它不会删除事件监听器。

$('.one, .two, .three, .four, .five, .six, .seven, .eight, .nine').on('click', function() {

    if($(this).hasClass('rotate'))
    {
        $(this).removeClass('rotate');
        alert('remove ' + $(this).attr("class"));
        $(this).off('click');
    } else {
        $(this).addClass('rotate');
        alert('add ' + $(this).attr("class")); 
        thisCube = $(this).data('id');
        init();
    }
});

- 我的解决方案 -

$('.container').click(function(){
    $(this).toggleClass('rotate');
});

$('#hover-change').children().hover(function(){
    $('.rotate > #cube').removeClass();
    $('.rotate > #cube').addClass($(this).attr('class'));
},
function(){});

Answer 1

您可以使用jQuery.on添加事件监听器，使用jQuery.off删除它们。

//Add
$('.one, .three, .four, .five, .six, .seven, .eight, .nine').on('click', function() { 
    thisCube = $(this).data('id');
    init();
});

// Remove
$('.one, .three, .four, .five, .six, .seven, .eight, .nine').off('click');

您也可以使用事件命名空间：

//Add
    $('.one, .three, .four, .five, .six, .seven, .eight, .nine').on('click.MyNamespace', function() { 
        thisCube = $(this).data('id');
        init();
    });

// Remove
    $('.one, .three, .four, .five, .six, .seven, .eight, .nine').off('click.MyNamespace');

这样你就不会与其他处理程序混在一起..

希望它有所帮助...

如何从DOM元素中删除事件侦听器？

1 个答案: