0

我正在使用 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();
    }
}
4

1 回答 1

0

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

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

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

于 2013-09-23T12:25:10.547 回答