I'm looking for a quick JavaScript fix:
Assume you are browsing a single webpage on a device with a mouse or trackpad (PC/Laptop) and I want following to happen.
When you right click the mouse:
Deactivate the right click. So no dropdown menu.
Turn the right click to a left click, e.g. I've clicked the right mouse button over an image or anchor, the site should handle it as if I've clicked with the left mouse button on this element.
This function should work on the whole website, on all elements.
Is there an easy way to fix this issue?
I've already tried this:
<script type="text/javascript">
function click (e) {
if (!e)
e = window.event;
if ((e.type && e.type == "contextmenu") || (e.button && e.button == 2) || (e.which && e.which == 3)) {
if (window.opera)
window.alert("Sorry, this function is deactivated.");
return false;
}
}
if (document.layers)
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = click;
document.oncontextmenu = click;
clickedOption.parentNode.selectedIndex = clickedOption.index;
</script>
This disables the function of the right mouse click but I can't get it to behave like a left mouse click.
Any solutions? What might be wrong?
This will force a left click on right clicks on the document, or any elements you click
document.addEventListener('contextmenu', function(e){
// Stop the context menu
e.preventDefault();
e.stopPropagation();
// Try to avoid document wide things, just elements
if(e.target.nodeName != 'HTML'){
e.target.click();
}
});
// Testing
document.addEventListener('click',function(e){
e.target.innerHTML = 'Caught';
});
<div>Right Click Me</div>
<span>Right Click Me</span>
To answer the comment to my answer ->
document.addEventListener('contextmenu', function(e){
// Stop the context menu
e.preventDefault();
e.stopPropagation();
});
// Testing
document.addEventListener('click',function(e){
e.target.innerHTML = 'Caught';
});
<div>I dont work on right clicks</div>
You could dispatch click event on document mousedown if right button is pressed:
$(document).on('mousedown contextmenu', function (e) {
if (e.button === 2) {
e.preventDefault();
var mclick = document.createEvent("MouseEvents");
mclick.initMouseEvent("click", false, true, window, 0, e.screenX, e.screenY, e.clientX, e.clientY, true, false, false, true, 0, null);
e.target.dispatchEvent(mclick);
}
});
-jsFiddle-
Not sure it will fit all your needs but i guess give you some ideas.
Try the following:
$("body").on("contextmenu", function(e){
e.preventDefault();
e.target.click();
});
Related
I am trying to disable right and middle button of mouse so that it cant open new window or tab when click on any menu or hyperlink. Below javascript code works fine for right button but not working for middle button. Middle button of mouse gets captured but still new window or tab opens when click on hyperlink or menu.
<script type="text/javascript">
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = function () {
return false;
};
}
else {
document.onmouseup = function (e) {
if (e != null && e.type == "mouseup") {
if (e.which == 3) {
alert("Sorry..... Right click Is Disabled!!!!");
return false;
}
if(e.which===2)
{
e.preventDefault();
e.stopImmediatePropagation();
alert("Sorry..... Mouse Scroll click Is Disabled!!!!");
return false;
}
else if(e.button===4)
{
e.preventDefault();
e.stopImmediatePropagation();
alert("Sorry..... Mouse Scroll click Is Disabled!!!!");
return false;
}
}
};
}
Its not woking for firefox, chrome and IE.
try
document.onmousedown= function (e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button");
}
}
According to MDN the auxclick event handles the "open link in new tab with middle mouse button" behaviour.
The following code will prevent the middle click behaviour on the entire page.
window.addEventListener("auxclick", (event) => {
if (event.button === 1) event.preventDefault();
});
If you want to disable it for a certain link only, just replace the event listener target (window) with a reference to the specific node.
I would like to catch some events for a specific div if the user clicked on the div (focus the div), keyboard events are catch (not if the last click was out of the div (unfocus the div)
I tried some things, but haven't succeeded : JSFiddle
document.getElementById("box").onkeydown = function(event) {
if (event.keyCode == 13) { // ENTER
alert("Key ENTER pressed");
}
}
This code doesn't work even if I click on the div.
Pure JS solution please
The div element isn't interactive content by default. This means that there isn't a case where the return key will ever trigger on it. If you want your div element to be interactive you can give it the contenteditable attribute:
<div id="box" contenteditable></div>
In order to now fire the event you need to first focus the div element (by clicking or tabbing into it). Now any key you press will be handled by your onkeydown event.
JSFiddle demo.
Giving the 'div' a tabindex should do the trick, so the div can have the focus:
<div id="box" tabindex="-1"></div>
If you click on the div it gets the focus and you can catch the event.
JSFIDDEL
If you set 'tabindex' > 0 you can also select the div using TAB.
You could catch all the click events, then check if the event target was inside the div:
var focus_on_div = false;
document.onclick = function(event) {
if(event.target.getAttribute('id') == 'mydiv') {
focus_on_div = true;
} else {
focus_on_div = false;
}
}
document.onkeyup = function(event) {
if (focus_on_div) {
// do stuff
}
}
try this code i hope this work
var mousePosition = {x:0, y:0};
document.addEventListener('mousemove', function(mouseMoveEvent){
mousePosition.x = mouseMoveEvent.pageX;
mousePosition.y = mouseMoveEvent.pageY;
}, false);
window.onkeydown = function(event) {
var x = mousePosition.x;
var y = mousePosition.y;
var elementMouseIsOver = document.elementFromPoint(x, y);
if(elementMouseIsOver.id == "box" && event.keyCode == "13") {
alert("You Hate Enter Dont You?");
}
}
DEMO
I know there are many questions asking how to prevent the autoscrolling mode that Firefox activates when a page is bigger than the viewport and you press the middle mouse button.
But what I actually need is just being able to detect the mouseup event, when autoscrolling is active. The event just doesn't seem to propagate, so I don't know when (and more important where) the mouse button is released.
I could also settle for detecting when the autoscrolling mode is gone and the mouse usage is back to normal.
I've prepared a Plunk to play with. When it starts, middle click anywhere and the text in the box will update. If you press the button, more content is added to the page: middle click will activate autoscrolling and the mouseup event is lost forever.
Link
Does this give a result?
$(selector).live('mouseup', function(e) {
if(e.which == 1) {
alert("left");
}if(e.which == 3) {
alert("right button");
}else if(e.which == 2) {
alert("middle button");
}
e.preventDefault();
});
$(document).ready(function(){
$("your id").on('mousedown', function(e) {
if( (e.which == 1) ) {
alert("left button");
} else if( (e.which == 3) ) {
alert("right button");
} else if( (e.which == 2) ) {
alert("middle button");
}
e.preventDefault();
}).on('contextmenu', function(e){
e.preventDefault();
});
});
http://jsfiddle.net/p49nF/
Hope,this helps.!!!
Got it.
Even tho' Pieter's answer is not correct, it gave me the correct idea.
For some reason if you preventDefault() in the mousedown handler, the mouseup one starts working.
$(document)
.on("mousedown", function(e) {
if (e.which !== 2) return;
$("#h").text("MouseDown");
e.preventDefault();
}).on("mouseup", function(e) {
if (e.which !== 2) return;
$("#h").text("MouseUp");
});
Plunk with the solution
This is my code:
// Close the bubble when we click on the screen.
document.addEventListener('mousedown', function (e) {
// if ain't right click
if(e.button != 2){
// hide
setTimeout("bubbleDOM.style.visibility = 'hidden';", 500);
}
}, false);
My probem is that when the user tries to scroll with the browser scroller the
setTimeout takes effect. How do i check that the mousedown isn't in the scroller?
Make sure the button is left and make sure it's not a bubbling event, not just if it's not right. I'd suggest to also use a function in setTimeout, so:
// Close the bubble when we click on the screen.
document.body.addEventListener('mousedown', function(e) {
// If it's a left click and the target is the current target
if(e.button === 1 && e.target === e.currentTarget) {
// hide
setTimeout(function() {
bubbleDOM.style.visibility = 'hidden';
}, 500);
}
}, false);
this is my code:
$('#handle').mousedown(function(e){
if( (!$.browser.msie && e.button == 0) || ($.browser.msie && e.button == 1) ) {
alert("Left Button");
}
})
this event is like to drag , but not drag ,
the left button Has been pressed, no released until mouseup,
so how to catch it using jquery ,
this is my demo : http://jsfiddle.net/ATZNW/1/
thanks
jQuery doesn't do this out of the box but you can fire your own events. Instead of alerting "left button", set some global variable dragging to true. Then:
$("#handle").mousemove(function (e) {
if (dragging) {
$(this).trigger("dragmove");
// Or just write the code you need here
}
});
Then you can handle that event elsewhere if you wish:
$("#handle").bind("dragmove", function (e) {
});