Question

我在元素上定义了mouseenter和mouseleave事件，并且我在同一元素上定义了click事件。现在当我在元素上click并将光标移离元素时，首先触发click事件，然后触发mouseleave事件，但我想延迟click事件直到mouseleave事件结束。我怎么能这样做？

我的代码：

＆＃13;

$("#ele").mouseenter( function(){
  $('#ele').text('onMouseEnter');
});

$("#ele").click( function(e){
	e.preventDefault();
  $('#ele').text('onClick');
});

$("#ele").mouseleave( function(){
  $('#ele').text('onMouseLeave');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='ele'> 
  Testing...
</div>

＆＃13;

修改：

请不要在click事件中建议包含部分mouseleave事件代码的解决方案，因为我还在窗口调整大小时手动触发click事件。哪个不会执行click事件中属于mouseleave事件代码的部分。

Answer 1

您可以使用标记检查是否单击了该元素，如果单击该元素，则将该标志设置为true。现在在mouseleave中检查标志是否为true，如果为true则执行click函数。

见下文。

＆＃13;

var isClicked = false;

function onClickDelayed() {
  $('#ele').text('onClick');
}

$("#ele").mouseenter(function() {
  $('#ele').text('onMouseEnter');
});

$("#ele").click(function(e) {
  isClicked = true;
});

$("#ele").mouseleave(function() {
  $('#ele').text('onMouseLeave');

  if (isClicked)
    onClickDelayed();
  isClicked = false;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='ele'>
  Testing...
</div>

＆＃13;

Answer 2

我想到的是你可以做一些变量，比如：

mouseHit = false;
$("#ele").click( function(e){
    e.preventDefault();
  mouseHit = true;
});

$("#ele").mouseleave( function(){
  $('#ele').text('onMouseLeave');
  if (mouseHit) {
     $('#ele').text('onClick');
     mouseHit = !mouseHit;
  }
});

在这种情况下，您的变量负责确保触发了之前的点击事件，但您在mouseleave事件中执行了实际操作。

如何延迟事件直到jQuery中的另一个事件结束？

2 个答案: