Element的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

單擊按鈕后，您需要停止事件傳播：

 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> 

Answer 2

使用變量來計算函數已執行的次數是否是一個選項？ 例如，您可以創建一個名為count的變量，並在單擊按鈕以運行該函數時使count的值等於0。 然后在其他函數中，只需將count的值加1，然后使用if語句檢查count的值是否大於1。如果是，則運行代碼。 可能會有更清潔的方法來完成此操作，但這可以解決您的問題。