我正在使用onclick
散列链接的事件来打开<div>
一个弹出窗口。但是中间点击并不会触发该onclick
事件,而是只获取href
链接的属性值并在新页面中加载URL。如何使用中键打开<div>
弹出窗口?
使用中键触发 onclick 事件
IT技术
javascript
jquery
2021-02-01 03:12:49
6个回答
编辑
此答案已被弃用,不适用于 Chrome。您很可能最终会使用auxclick 事件,但请参阅下面的其他答案。
/编辑
beggs 的回答是正确的,但听起来您想阻止中间单击的默认操作。在这种情况下,包括以下内容
$("#foo").on('click', function(e) {
if (e.which == 2) {
e.preventDefault();
alert("middle button");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="foo" href="http://example.com">middle click me</a>
preventDefault()将停止事件的默认操作。
要检测到中键/鼠标滚轮按钮,您必须使用 event auxclick
。例如:
<a href="https://example.com" onauxclick="func()" id="myLink"></a>
然后在你的脚本文件中
function func(e) {
if (e.button == 1) {
alert("middle button clicked")
}
}
如果您想从 JavaScript 执行此操作(不使用 HTML 属性onauxclick
),那么您addEventListener
可以使用该元素:
let myLink = document.getElementById('myLink')
myLink.addEventListener('auxclick', function(e) {
if (e.button == 1) {
alert("middle button clicked")
}
})
<a id="myLink" href="http://example.com">middle click me</a>
结帐有关的MDN页面auxclick
事件在这里。
您可以使用
以识别单击了哪个鼠标按钮。
返回一个整数值,指示更改状态的按钮。
- 0 表示标准的“点击”,通常是左键
- 1 为中键,通常是滚轮点击
- 2 为右键,通常是右键单击
请注意,Internet Explorer 中不遵循此约定:有关详细信息,请参阅 QuirksMode。
按钮的顺序可能会有所不同,具体取决于定点设备的配置方式。
还阅读
有两个属性可用于确定哪个鼠标按钮被点击:which 和 button。请注意,这些属性并不总是适用于点击事件。要安全地检测鼠标按钮,您必须使用 mousedown 或 mouseup 事件。
document.getElementById('foo').addEventListener('click', function(e) {
console.log(e.button);
e.preventDefault();
});
<a id="foo" href="http://example.com">middle click me</a>
这个问题有点老了,但我找到了一个解决方案:
$(window).on('mousedown', function(e) {
if( e.which == 2 ) {
e.preventDefault();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="http://example.com">middle click me</a>
Chrome 不会为鼠标滚轮触发“点击”事件
在 FF 和 Chrome 中工作
jQuery 为.which
事件提供了一个属性,该属性从左到右为单击按钮 ID 提供 1、2、3。在这种情况下,您需要 2。
用法:
$("#foo").live('click', function(e) {
if( e.which == 2 ) {
alert("middle button");
}
});
Adamantium 的答案也适用,但您需要注意 IE,因为他指出:
$("#foo").live('click', function(e) {
if((!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 2)) {
alert("middle button");
}
});
还要记住该.button
属性是 0-indexed 而不是 1-indexed like .which
。