javascript - HTML/JS : Define onClick and onAuxClick at the same time?

标签 javascript html events onclick mouseevent

看来 Chrome 和 Firefox 推出了 onAuxClick (Chrome 自 Chrome 55 起)。这类似于 onClick,但适用于非主按钮(即中键和左键单击)。

我有很多类似这样的 HTML 代码:

<div onClick="someFunc(event);">Click here with either left or middle click</div>

(当然,SomeFunc 有一些代码,根据是中键单击还是左键单击,执行的操作略有不同)。

添加 onAuxClick 破坏了所有这些代码,因为中键单击不再触发 onClick 函数。感谢 Chrome 和 Firefox 的 super 烦人!

无论如何,有什么我可以替换 onClick 的东西,仍然会触发这两个事件吗?像这样的东西:

<div onAnyClick="someFunc(event);">Click here with either left or middle click</div>

或者是现在到处调用重复函数的解决方案,如下所示:

<div onClick="someFunc(event);" onAuxClick="someFunc(event);">Click here with either left or middle click</div>

谢谢。

最佳答案

mozilla 已经做了一个例子。检查这个 fiddle :

// Source: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onauxclick

var button = document.querySelector('button'); 
var html = document.querySelector('html');

function random(number) {
  return Math.floor(Math.random() * number);
}

button.onclick = function() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  button.style.backgroundColor = rndCol;
};

button.onauxclick = function() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  button.style.color = rndCol;
}
<button>
  Click Me!
</button>

关于javascript - HTML/JS : Define onClick and onAuxClick at the same time?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43057982/

相关文章:

用于查找数组中不在另一个数组中的元素的 Javascript 算法

javascript - 在 HTML 5 SQL 查询中按列号检索列

html - 防止移动浏览器缩放一个 HTML 元素

javascript - 从本地存储中清除对象

javascript - 如何防止tinymce中的事件

javascript - 想要拉伸(stretch) Flexigrid 中的最后一列

javascript - 无法读取 Javascript 中未定义错误消息的属性 'length'

html - 品牌形象位于导航栏之外

c# - 清除所有事件订阅(克隆链接)

c# - ListPicker SelectionChanged 被多次调用