Question

我很确定这不是重复，因为我在其他地方找不到问题或者无法描述它。

我有这个小函数onClickOff()，它会临时创建一个事件，当你在定义的元素之外点击时会运行一些代码。这很好用，问题是当你点击按钮来运行这个功能时，它也会在另一个我不想要的元素之外注册点击。

尝试点击代码段中的按钮以查看我的意思 - 我希望您点击按钮时不会显示该消息，但是在点击按钮后单击红色div外部时。

添加：我不想使用event.stopPropagation();，因为这会改变我正在使用的元素中的功能。

div.click1 {
  width: 100px;
  height: 100px;
  background: red;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    function onClickOff(selector, func) {
        $(document).unbind('click.onOffClick touchstart.onOffClick').bind('click.onOffClick touchstart.onOffClick', function(e) {

            if($(e.target).closest(selector).length === 0) {
                func();
                $(document).unbind('click.onOffClick touchstart.onOffClick');
            }
        });
    }
</script>

<div class="click1" style="width: 100px; height: 100px; background: red"></div>
<button type="button" class="click1">Click 1</button>

<script type="text/javascript">
    $('body').on('click', 'button.click1', function(){
        onClickOff('div.click1', function(){
            alert('You clicked off the square!');
        })
    });
</script>

如果它有帮助，这个功能主要用于下拉菜单，但我希望它是好的和模块化的，就像它现在没有改变这一点。在此先感谢您的帮助！

Answer 1

单击按钮后，您需要停止事件传播：

＆＃13;

div.click1 {
  width: 100px;
  height: 100px;
  background: red;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    function onClickOff(selector, event, func) {
        event.stopPropagation();
        $(document).unbind('click.onOffClick touchstart.onOffClick').bind('click.onOffClick touchstart.onOffClick', function(e) {

            if($(e.target).closest(selector).length === 0) {
                func();
                $(document).unbind('click.onOffClick touchstart.onOffClick');
            }
        });
    }
</script>

<div class="click1" style="width: 100px; height: 100px; background: red"></div>
<button type="button" class="click1">Click 1</button>

<script type="text/javascript">
    $('body').on('click', 'button.click1', function(e){
        //e.stopPropagation();
        onClickOff('div.click1', e, function(){
            alert('You clicked off the square!');
        })
    });
</script>

＆＃13;

Answer 2

使用变量来计算函数已经执行的次数吗？例如，当您单击按钮以运行该函数时，您可以创建一个名为count的变量并使count的值等于0。然后在你的另一个函数中你只需要将count加1，然后使用if语句来检查count的值是否大于1.如果是，则运行代码。可能有一种更简洁的方法来实现这一目标，但这可以解决您的问题。

Element的onClickOff（）事件会提前触发

2 个答案: