1个html对象-不同的功能(单击并双击）

1 html object - different functionalities (one-click and double-click)

本文关键字：单击 双击 功能 对象 html 1个      更新时间：2023-09-26

我用jquery有一个函数，如果我点击一个html框，我会得到一个小的信息框，但我的问题是，我能有两个不同的功能吗？我的代码是这样写的：

<div onclick="getInofbox(id)"><img src="image.jpg" /></div>

点击后，我只得到一个小盒子里的内容，我找不到任何双击选项。

要在同一个元素上进行点击和双击事件，请使用超时：

var timeout, doubleClick = false;
$('p').click(function() {
   timeout = setTimeout(simpleClick, 500); 
});
$('p').dblclick(function() {
    doubleClick = true;
    clearTimeout(timeout);
    alert('Double click');
});
function simpleClick() {
    if(!doubleClick) {
        alert('Simple click');
    }
    doubleClick = false;
}

这里，您有0.5秒的超时时间。如果它只检测到一次简单的点击，它就会调用该函数进行简单的点击。否则，它将清除超时并转到双击功能。

jsfiddle的一个例子。

您可以使用dblclick()jquery事件。

$('div').dblclick(function () {
    alert('Double click');
});

但根据jQuery API文档，不建议对同一个HTML元素使用click和dblclick事件处理程序。您可以在此处参考API文档。

查看此演示

回答您的这个问题："我现在必须离开这个解决方案，只打开第一个带链接的信息框，如果我点击一个元素并获得信息框，那么如果我点击另一个框，点击后第一个框应该关闭吗？"

您可以注册点击两个链接，打开第二个信息框时只需关闭第一个信息框。

您可以查看这个演示，在这个演示中，我使用了jQueryUI对话框（它不是模态对话框），并在单击第二个对话框时关闭第一个对话框。

相关文章：