Событие элемента onClickOff () запускается рано

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

Используете ли вы переменную для подсчета количества раз, когда функция уже была выполнена?Вы можете, например, создать переменную с именем count и установить значение count равным 0, когда вы нажимаете кнопку, чтобы запустить функцию.затем в другой функции вы просто добавляете 1 к значению count и затем к оператору if, чтобы проверить, является ли значение count выше 1. Если это так, запустите код.Для этого может быть более чистый способ, но это может решить вашу проблему.

Answer 2

Вам нужно остановить распространение события после нажатия кнопки:

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, 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>