将元素添加到 DOM 后加载内容答案

【问题标题】：Loading content after adding an element to DOM将元素添加到 DOM 后加载内容
【发布时间】：2013-09-23 20:25:10
【问题描述】：

我正在使用 JQuery 的 load() 来更改 div 的内容。要调用此方法，我将单击处理程序添加到 HTML 元素，例如一个 img，它将调用此方法。在 mousedown 上，我在单击的 img 之后立即将另一个 img 添加到 DOM，该 img 恰好覆盖了它。我这样做是为了向用户显示发生了点击。在 mouseup 上我隐藏它。当用户再次单击该 img 时，我会再次显示它，因此我不会将其从 DOM 中删除。

这基本上可以，但是在单击时调用加载方法时会遇到麻烦。除非我按住鼠标按钮大约一秒钟，否则不会执行单击事件。当我没有在按下的图像之后（但例如在 DOM 中的之前）插入覆盖图像时，onClick 工作正常。

将 load() 绑定到 mouseUp 事件的行为与 onClick 相同。

谁能给我一个提示如何解决这个问题？一种解决方法是将 load() 绑定到 mousedown 事件。但这不是我想要的。

element.on('click', function() {
    $('#content').load(target, function(event) {
        [...]
     });
});

element.on('vmousedown', function(event) {
    if (event.which == 1 || event.which == 0) {
        showOnClickImage($(this));
    }
});

element.on('vmouseup mouseleave', function(event) {
    if (event.which == 1 || event.which == 0) { // left mousebutton or touch respectively
        hideOnClickImage($(this));    
    }
});

function showOnClickImage(element) {
    if (element.data("onClickImageOverlay")) {
        element.data("onClickImageOverlay").show();
    } else if (element.data("onclickimage")) {
        [read attributes]
        var overlayImage = $("<img data-onClickImageOverlay src='" + src + "' style='position:absolute; width:" + width + "; height:" + height + "; left:" + left + "; top:" + top + ";' />");
        element.after(overlayImage); // removing this line makes load() work
        element.data("onClickImageOverlay", overlayImage);
    }
    clearTimeout(clickTimeout);
    clickTimeout = setTimeout(function() {hideOnClickImage(element);}, 300);
}


function hideOnClickImage(element) {
    if (element.data("onClickImageOverlay")) {
        element.data("onClickImageOverlay").hide();
    }
}

【问题讨论】：

请问，为什么你不想将加载的东西绑定到mousedown？
首先是因为行为不同。人们期望按钮事件在松开鼠标按钮后运行，而不是在按下它后立即运行。有些人可能会出于任何原因按住按钮，例如调用移动设备上的上下文菜单。其次，我想了解问题所在。我想我还没有理解与事件触发和 DOM 相关的一些重要的东西。忽略问题通常会导致以后出现更多问题。

标签： javascript jquery html

【解决方案1】：

我找到了答案。当鼠标按下时显示另一个图像时，此叠加图像会捕获 mouseup 事件，因为它在 mouseup 时位于原始图像之上。这也是为什么 onclick 在原始图像上不起作用的原因。此外，当在 mousedown 上显示覆盖图像时，会触发 mouseleave 事件。这是有道理的，因为鼠标指针离开了原始图像。

当在元素上等待的时间比 setTimeout() 持续的时间长时，mouseup 当然会起作用。 setTimeout() 0.3 秒后隐藏覆盖图。

我最终决定将 mouseup 监听器绑定到两个图像。

【讨论】：