Question

据说我的解释过于复杂，所以我试图说明我的想法：

编辑：

我只想了解 on（）的工作原理。为什么下面提到off（）取消绑定 ＆＃39; mouseover mouseout＆＃39; 事件以获得第二个LI：

$('.li').on('mouseover mouseout',changeBorder);
$('.li:nth-child(2)').off('mouseover mouseout',changeBorder);

虽然未提及off（）未解除 ＆＃39; mouseover mouseout＆＃39; 事件以获得第二个LI？

$('#container').on('mouseover mouseout', '.li',changeBorder);
$('.li:nth-child(2)').off('mouseover mouseout',changeBorder);

我想使用第一种方法，因为我打算将来动态添加另一个LI，因此第二种方法不会为将来的LI绑定事件 - 仅适用于现有的LI。我当然可以为每个新动态附加LI绑定事件，同时我创建并追加它，但我正在寻找一些更优雅的方法来做到这一点:)所以根据下面的例子，我希望第二个LI不要对鼠标悬停做出反应，但即使我关闭（）对其进行反应，它仍会作出反应。

＆＃13;

$('#container').on('mouseover mouseout', '.li',changeBorder);
$('.li:nth-child(2)').off('mouseover mouseout',changeBorder);

//$('.li').on('mouseover mouseout',changeBorder);
//$('.li:nth-child(2)').off('mouseover mouseout',changeBorder);

function changeBorder(event){
  if(event.type==='mouseover'){
    	$(event.target).css('border','dotted 2px #33aaff');
  	} else {
  		$(event.target).css('border','none');
  	}
}

＆＃13;

.li {
  width:200px;
  list-style-type:none;
  background-color:#efefef;
  padding:6px;
  margin:3px;
  border-radius:3px;
  cursor:pointer;
  color:#aaa;
  font-size:20px;
  outline:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="container">
  <li class="li" contenteditable>sample A</li>
  <li class="li" contenteditable>sample B</li>
  <li class="li" contenteditable>sample C</li>
  <li class="li" contenteditable>sample D</li>
</ul>

＆＃13;

Answer 1

如果我理解正确，那么这可能对你有用......而且它比你的代码复杂得多。不需要重复绑定/解除绑定事件处理程序。

https://developer.mozilla.org/de/docs/Web/API/Document/activeElement

＆＃13;

$(document).on('mouseenter', '.everyFutureItem', function(e){
  // ad border only if elmt is not the activeElement 
  if (e.target != document.activeElement) {
    $(e.target).css('border','dotted 2px #33aaff');
  }
});

$(document).on('mouseleave click', '.everyFutureItem', function(e){ 
  $(e.target).css('border','none');
});

＆＃13;

.everyFutureItem {
  width:200px;
  list-style-type:none;
  background-color:#efefef;
  padding:6px;
  margin:3px;
  border-radius:3px;
  cursor:pointer;
  color:#aaa;
  font-size:20px;
  outline:none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="container">
  <li class="everyFutureItem" contenteditable>sample A</li>
  <li class="everyFutureItem" contenteditable>sample B</li>
  <li class="everyFutureItem" contenteditable>sample C</li>
  <li class="everyFutureItem" contenteditable>sample D</li>
</ul>

＆＃13;

Answer 2

OP对期望行为的解释并不清楚，为了加快这里的问题，我要解释的是：

用户将鼠标指向第二个<li> [mouseover]
调用处理程序（即changeBorder()）并在第二个<li>上进行边框
用户点击第二个<li>上的鼠标 [焦点]
用户将鼠标移出第二个<li> [mouseout]
第二个<li>上的边框仍然存在，因为mouseout和mouseover事件在第4步发生之前未从第二个<li>开始。
将鼠标返回到第二个<li>时，不再触发任何mouseout或mouseover个事件。
离开第二个<li>后，点击第二个<li>外部发生了blur个事件。
第二个<li>会反弹到mouseover和mouseout个事件。

在jQuery API Documentation - .on()

在下次处理事件之前，在当前元素上添加或删除事件处理程序不会生效。

考虑事件序列，并且知道在处理事件的 next 时间之前，添加/删除委派事件不适用。所以在以下场景中：

用户将鼠标指向第二个<li> [mouseover]
调用处理程序（即changeBorder()）并在第二个<li>上进行边框
用户点击第二个<li>上的鼠标 [焦点]
用户将鼠标移出第二个<li> [mouseout]
第二个<li>边框消失了。
处理程序未绑定，但它看起来不起作用，因为边框仍在制作，好像changeBorder()仍然起作用这意味着第二个<li>仍然绑定到mouseover和mouseout事件。
要停止此行为，您必须在第二个focus上触发另一个<li>事件。 [焦点] 。

/* Using the direct selector to the <li> */
$('.edit').on({
  /* Mapping events */
  mouseover: activate,
  mouseout: activate,
  focus: function(e) {
    console.log(e.type);
    $(this).off('mouseover mouseout', activate);
  },
  blur: function(e) {
    console.log(e.type);
    $(this).on('mouseover mouseout', activate);
  }

});

/* Checks to see if event target has class .off... */
/* ...and removes .off and adds .on class... */
/* ...otherwise remove .on and add .off class */
function activate(e) {
  console.log(e.type);
  var tgt = $(e.target);
  tgt.hasClass('off') ? tgt.addClass('on').removeClass('off') : tgt.addClass('off').removeClass('on');
}

.edit {
  width: 200px;
  list-style-type: none;
  background-color: #efefef;
  padding: 6px;
  margin: 3px;
  border-radius: 3px;
  cursor: pointer;
  color: #aaa;
  font-size: 20px;
  outline: none;
}
/* Two state classes */

.on {
  border: 2px dotted #33aaff;
}
.off {
  border: 0 none transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="list1">
  <li class="edit off" contenteditable>sample A</li>
  <li class="edit off" contenteditable>sample B</li>
  <li class="edit off" contenteditable>sample C</li>
  <li class="edit off" contenteditable>sample D</li>
</ul>

jquery on（）表示每个未来的.abc元素，然后是off（）表示特定的.abc元素。怎么做？

2 个答案: