Question

我有JS代码，其中我使用全局事件处理程序。全球事件处理程序的意思是：

$(document).on('click', function(e) {
  if (e.target.className === 'my-class') {
    return e.target.className + ' has been clicked';
  }
  if (e.target.id === "id1") {
    return e.target.id + ' has been clicked';
  }
}

我使用的是单独的事件处理程序 - 示例如下：

$('.my-class').on('click', function(e) {
  return this + ' has been clicked';
}
$('#id1').on('click', function(e) {
  return this + ' has been clicked';
}

但是在处理程序的if and/or语句方面遇到了问题，并且为了不对重复的代码，切换到全局事件处理程序 - 使用if and/or的示例是：< / p>

$(document).on('click', function(e) {
  if (e.target.className === 'my-class' || e.target.className === 'my-other-class') {
    return e.target.className + ' has been clicked';
  }
  if (e.target.id === "id1") {
    return e.target.id + ' has been clicked';
  }
}

（这是个人处理程序的样子）

$('.my-class').on('click', function(e) {
  return this + ' has been clicked';
}
$('.my-other-class').on('click', function(e) {
  return this + ' has been clicked';
}
$('#id1').on('click', function(e) {
  return this + ' has been clicked';
}

但是，现在我遇到的问题是我的代码变得非常复杂，而且我正在使用e.target，e.currentTarget，$(e.target).children()等。 - $(e.target).parents()[i]中的for loop，如下所示：

for (var i = 0; i < $(e.target).parents().length; i++) {
  if ($(e.target).parents()[i].className === 'my-class') {
    return 'this is annoying';
  }
}

这会让人很困惑。

我想切换回各个处理程序（除非我真的应该使用全局处理程序）但不知道如何使用单个处理程序处理if and/or部分

有没有人知道如何克服这个问题，或者能够深入了解我应该如何构建我的事件处理程序？

谢谢。

Answer 1

请查看if声明。你必须写两个相同的＆＃39; ==，你只写了一次。

if (e.target.className == 'my-class' || e.target.className == 'my-other-class') {
}

Answer 2

您应该使用event delegation并让jQuery为您完成工作：

$(document).on('click', '.my-class, .my-other-class', function() {
   // handle my-class and my-other-class clicks
});

此外，在您的处理程序中，this绑定到event.target，因此您可以将位简化为$(this).hasClass('foo')，this.id === 'bar'等。

Answer 3

我绝不会将document用作点击事件的选择器。如果你问我，会导致混乱。如果你想要这些元素的相同行为，我会做这样的事情：

$('.class1, .class2, #id1').on('click', function () {
    return $(this).attr('class') || $(this).attr('id');
 });

JS / jQuery - 在各个事件处理程序上使用全局事件处理程序

3 个答案: