使用 jQuery 或 Javascript 仅在 setInterval 内触发一次点击

Question

如果用户未表示同意，网站会在大约 1-2 秒后显示 cookie 同意。这意味着，同意不是直接在源中，而是在 1-2 秒后在 dom 中。

我必须检测用户是否点击了同意 div 内的按钮。如果我使用文档就绪功能，则未检测到单击。我必须使用 setInterval 因为 setTimeout 不起作用。原因是必须在同意中打开另一个窗口，因此我不能像超时一样使用固定时间。

Consent div 由一个类名为“cmp-consent”的 div 提供。我每隔 1800 毫秒用 setInterval 检查该 div 的 dom。如果 div 在 1800 毫秒后不存在，则用户已经同意，我清除 setInterval。

但是：

如果 div 存在，它会等到用户点击同意标题中的第二个按钮。进行此单击时，将进行另一次单击并关闭窗口。这工作得很好。

问题是，如果用户没有立即点击这个按钮（consent-header 按钮：eq (1)），setInterval 当然会继续运行。可以看到console.log前面的计数器在增加。如果用户然后单击该按钮，则执行后续单击的频率与存在 setInverval 一样频繁。如果用户等待的时间太长，例如超过一分钟，这将花费很长时间。问题是，你如何管理一个动作在 setInterval 中只执行一次。

这是我的脚本：

var userConsent = window.setInterval(function() {
if ($(".cmp-consent")[0]){

console.log('consent exists');  

    $( ".consent-header button:eq(1)" ).click(function(){   

        console.log('User clicked the button');
        $(".primary button").click();
        $(".close-icon").click();           

        window.clearInterval(userConsent);
    });


} else {

console.log('consent given, remove interval');
window.clearInterval(userConsent);

} 

}, 1800); 

Answer 1

这是@cloned 建议的一个工作示例。

document.addEventListener("click", function(e) {
    for (var target=e.target; target && target!=this; target=target.parentNode) {
    // loop parent nodes from the target to the delegation node
        if (target.matches('.consent-header')) {
            handler.call(target, e);
            break;
        }
    }
}, false);

function handler() {
  console.log('do stuff');
}

<div class="consent-header">
<button>I agree</button>  
</div>