javascriptsafarionmouseuponmouseclick

onmouseup not working in safari


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 ?


Solution

  • 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)">