onmouseup not working in safari

Question

This is the example which I got from w3schools, where I am getting weird behaviour for safari browser alone.

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

Safari: If we left-click on top of paragraph, the text turns red color and when I leave it , it turns Green color. That's fine. Now, I am right-clicking on top of the paragraph.Now the text color turns Red and when I leave it, it NEVER turns to green color. i.e onmouseup is not working in safari if we are using right click. Can anyone tell me why ? Any solution for this ?

Answer 1

In safari, it seems like the focus is given to the context menu when right-clicking, so the context menu receives the mouseup event rather than the P element. As for a solution, you can detect the mouse button to prevent it to behave on the right click. Right click events are messy unless you want to handle a custom context menu.

If you want the mouseup event to work in safari when fired with a right click, you will need to disable the context menu by adding this attribute to the P element:

oncontextmenu="return false">

It is also possible to detect if the left click fired the event (which is usually the button you want to handle):

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
    }
}

In the example from w3schools, it would lead to something like this:

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;
    }
}

Then passing the event in the function call:

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