Question

我在ul标记内有div个标记。我已对mouseup代码div代码及click代码申请了ul个事件。

问题
每当我点击ul代码时，都会触发mouseup和click个事件。

我想要的是，当我点击ul代码时，只会触发click个事件，如果我在mouseup代码上执行了div个事件，则仅{ {1}}事件应该触发。

我的代码：
HTML：

mouseup

JS：

<div class="m1">
    Nitin Solanki
    <ul>
        <li>one</li>
        <li>two</li>
    </ul>
</div>

JSFIDDLE

Answer 1

您可以停止传播事件

$(document).on('mouseup', '.m1', function() {
  alert('div mouseup ');
});
$(document).on('mouseup', '.m1 ul', function(e) {
  e.stopPropagation()
});


$(document).on('click', 'ul li', function() {
  alert("ul li- clicked");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="m1">
  Nitin Solanki
  <ul>
    <li>one</li>
    <li>two</li>
  </ul>
</div>

Answer 2

您可以使用jQuery＆＃39; is()来检查点击的元素是div还是列表：

$(document).on('mouseup', '.m1', function(event){
    // Check if the clicked element is the div and not the list
    if($(event.target).is('div'))
        alert('div mouseup ');
});

$(document).on('click', 'ul li', function(){
    alert("ul li- clicked ");
});

Answer 3

原因是事件冒泡。您可以使用event.stopPropagation();

处理此问题

$(document).ready(function(){

        $("ul li").click(function(event){
            event.stopPropagation();
            alert("The ul li element was clicked.");
        });

        $(".m1").click(function(){
            alert("The div element was clicked.");
        });
    });

Answer 4

这是一个奇怪的问题，作为＆＃34;点击＆＃34;的一部分。实际上是一个鼠标。点击包含mousedown，然后是同一元素上的mouseup。

我认为你唯一可以做的就是在点击开始时存储，并为mouseup事件所依赖的变量添加一秒的超时。

喜欢这个。（即使张贴这个也觉得很脏）。

var clickStarted = false;

$(document).on('click', 'ul li', function(){
    alert("ul li- clicked");
    clickStarted = false;
});

$(document).on('mousedown', 'ul li', function(){
    clickStarted = true;
    setTimeout(function(){ clickStarted = false; }, 1000);    
});

$(document).on('mouseup', '.m1', function(){
    if(!clickStarted)
        alert('div mouseup ');
});

JSFiddle

在mouseup事件Jquery

4 个答案: