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