将带有事件委托的事件侦听器附加到 Jupyter 笔记本？答案

【问题标题】：Attach an event listener with event delegation to Jupyter notebook?将带有事件委托的事件侦听器附加到 Jupyter 笔记本？
【发布时间】：2017-03-08 03:08:46
【问题描述】：

我正在尝试将事件附加到 Jupyter 笔记本变量（用于某些实验）：

$( "#notebook-container" ).on( "dblclick", ".cm-variable", function( event ) { alert("hi"); });

由于 Jupyter 笔记本变量不断刷新/等，我认为将事件处理程序附加到所有变量的最佳方法是通过 jquery 事件委托：https://learn.jquery.com/events/event-delegation/

“事件委托允许我们将单个事件侦听器附加到父元素，该事件侦听器将为匹配选择器的所有后代触发，无论这些后代现在存在还是将来添加。”

所以我觉得这很合适，但是，如果我将上面共享的代码行粘贴到 js 控制台中，我不会得到想要的效果。

我想知道执行此操作的正确方法是什么，您可以在此处访问实时 jupyter 笔记本：https://try.jupyter.org/

【问题讨论】：

@LouiseDavies 你是对的，它适用于 mousedown！你知道是否有另一种方法可以双击到达，只是为了尝试其他路线？

标签： javascript jquery events jupyter-notebook jupyter

【解决方案1】：

根据this 的回答，下面是如何使用 mousedown/mouseup 模拟双击（mouseup 可能更好，因为单击是在用户抬起鼠标而不是第一次按下时触发）

var clicks = 0, delay = 400;
$("#notebook-container").on("mouseup", ".cm-variable", function(event) {
    event.preventDefault();
    clicks++;

    setTimeout(function() {
        clicks = 0;
    }, delay);

    if (clicks === 2) {
        clicks = 0;
        alert("hi");
        return;
    }
});

【讨论】：