Question

我有一个我将拥有多个子组件，首先如果我点击任何组件，应该触发相应的点击事件，之后该div中的其他组件点击事件不应该触发，除非鼠标另有说明离开边界并再次回来。

我已经做了以下事情来实现这一点，现在第一部分已经完成，当我们点击任何组件时，将触发相应的点击事件，之后在该div中没有其他组件点击事件将发生，因为我我正在使用.off("click");

删除点击事件

但现在的问题是，当鼠标离开div时，我想重新连接当我使用以下代码时没有发生的click事件，

$('.parent *').on('mouseleave', function () {
    $(".parent *").on('click')
});

任何人都可以告诉我一些解决方案吗

JSFiddle

Answer 1

您必须为click事件提供事件处理程序：

$(".parent *").on('click', function () {
    console.log('Event occured');
    // Your event handler function call here
});

Answer 2

您不能通过调用on('click')添加已删除的处理程序，您需要传递事件处理程序。

一种可能的解决方案是知道父母是否已被点击，然后不做任何事情，你可以使用像

这样的类

$(document).ready(function () {

    $("#myButton").click(function () {
        if (isParentClicked(this)) {
            return;
        }
        console.log('myButton clicked....');
    });

    $("#myHyperLink").click(function () {
        if (isParentClicked(this)) {
            return;
        }
        console.log('myHyperLink clicked....');
    });

    function isParentClicked(el) {
        return $(el).closest('.parent').hasClass('clicked');
    }

    $('.parent').on('mouseleave', function () {
        $(this).removeClass('clicked')
    });

    $(".parent").click(function (event) {
        $(this).addClass('clicked')
    });

});

演示：Fiddle

另一种可能的解决方案是

$(document).ready(function() {
  $('.clickable').click(function(event) {
    if ($(this).closest('.parent').hasClass('clicked')) {
      event.stopImmediatePropagation();
    }
  })

  $("#myButton").click(function() {
    console.log('myButton clicked....');
  });

  $("#myHyperLink").click(function() {
    console.log('myHyperLink clicked....');
  });

  $('.parent').on('mouseleave', function() {
    $(this).removeClass('clicked')
  });

  $(".parent").click(function(event) {
    $(this).addClass('clicked')
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='parent' style="width:100px;border:2px solid blue">
  <button id="myButton" class="clickable">Click Me</button>
  <a href="#" id="myHyperLink" class="clickable">Click Me Too</a>
</div>

演示：Fiddle

Answer 3

$(document).ready(function () {
    function clickEvents(){
        $("#myButton").off().on('click',function () {
            console.log('myButton clicked....');
        });

        $("#myHyperLink").off().on('click',function () {
            console.log('myHyperLink clicked....');
        });
    }

    $('.parent').on('mouseleave', function () {
       clickEvents()
    });

    $(".parent").click(function (event) {
        $(".parent *").off("click");
    });
 clickEvents()

}）;

您也可以试试这个。

Answer 4

您需要将click事件绑定到特定函数，以便在单击时可以触发该函数。

$('.parent *').on('mouseleave', function () {
  $(".parent *").off('click').on("click",functionName);
});

这就是再次绑定点击的全部内容。希望这可以帮到你。谢谢！！

点击事件不起作用

4 个答案: