javascript - onmouseup 在 safari 中不起作用

Question

这是我从 w3schools 获得的示例，我在其中单独使用 safari 浏览器时会出现奇怪的行为。

http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousedown

Safari :如果我们在段落顶部左键单击，文本会变成红色，当我离开它时，它会变成绿色。没关系。现在，我右键单击该段落的顶部。现在文本颜色变为红色，当我离开它时，它永远不会变为绿色。也就是说，如果我们使用右键单击，onmouseup 在 Safari 中不起作用。谁能告诉我为什么？对此有什么解决方案吗？

Answer 1

在 safari 中，似乎右键单击时焦点被赋予上下文菜单，因此上下文菜单接收 mouseup 事件而不是 P 元素。至于解决方案，您可以检测鼠标按钮以防止它在右键单击时起作用。右键单击事件是除非您想处理自定义上下文菜单，否则很乱。

如果您希望 mouseup 事件在右键单击时在 safari 中起作用，您需要通过将此属性添加到 P 元素来禁用上下文菜单:

oncontextmenu="return false">

还可以检测左键单击是否触发了事件(通常是您要处理的按钮):

function mouse_handler(event) {
    var evt=window.event||event;
    var button = evt.which || evt.button;
    if (button == 1) { // if left mouse button
        // handle the event
    }
}

在 w3schools 的例子中，它会导致这样的结果:

function myFunction(elmnt,clr,event)
{
    var evt=window.event||event;
    var button = evt.which || evt.button;
    if (button == 1) { // if left mouse button
        elmnt.style.color=clr;
    }
}

然后在函数调用中传递事件:

<p onmousedown="myFunction(this,'red',event)" onmouseup="myFunction(this,'green',event)">