In the content script of my Firefox Addon I have the following code:
window.addEventListener('click', function(event) {
event.preventDefault();
var t = event.target;
var nearestATag = t.nodeName === 'A'
? t
: findParentByTagName(t, 'A');
if (nearestATag !== undefined) {
self.port.emit('click-link', nearestATag.getAttribute('href'));
}
});
I want to prevent the URL from opening in the panel where the script is running and open it in the new browser's tab instead.
It works perfectly in case of a left mouse click, but doesn't work as expected in case of mousewheel click -- URL opens twice, so it seems that preventDefault doesn't do anything here.
Adding event.stopPropagation(); after event.stopPropagation(); works but I don't really understand why.
So can you help me understand why?
Related
On some websites, you can right-click on a link and chose "open in a new tab" and it works fine, but not if one uses the middle mouse button to do so.
I encountered this a few times, it's it not too annoying but I'm still curious what causes this behaviour. (About the HOW)
Here is a site that behaves this way browsing with Chrome 46:
http://ebookfriendly.com/free-public-domain-books-sources/
the html link tags looks normal:
<a title="Feedbooks" href="http://www.feedbooks.com/">⇢ Feedbooks</a>
The cause must be something in the javascript. Any pointers?
One way to do this is using the auxclick event. (auxclick on MDN)
The following code will prevent the middle click behaviour on the entire page.
window.addEventListener("auxclick", (event) => {
if (event.button === 1) event.preventDefault();
});
Seems like this link has an event listener that uses preventDefault() and opens the page by other means.
Edit: hard to say why exactly they do this but when I look at the whole handler it seems that the link is being passed to google analytics:
function(e) {
var n = this.getAttribute("href"),
i = "string" == typeof this.getAttribute("target") ? this.getAttribute("target") : "";
ga("send", "event", "outbound", "click", n, {
hitCallback: t(n, i)
}, {
nonInteraction: 1
}), e.preventDefault()
}
You can ask which button caused the event and prevent the default behavior.
document.querySelector("a").addEventListener("click", function(e) {
if (e.which === 2) {
e.preventDefault();
}
}, false);
$(document).mousedown(function(e){
if(e.which == 2 ){
e.preventDefault();
alert("middle click");
return false;
}
});
works only if you keep the alert()
I using the Javascript library D3 and I have the ability to select multiple nodes by using shift + left mouse click. When I do this in Firefox (as my nodes have images appended) it opens the image in a new window/tab. I don't really want this happening.
How do I stop this event from firing ?
with jquery:
jQuery(document).keydown(function(e){
if(e.which === 16) {
e.preventDefault();
return;
}
});
update:
How about instead of disabling shift, you try to disable the click. you might stop it if you attach a click event and use an event.preventDefault() on it
This is how in d3 you completely disable clicks
d3.select("#prevent_link").on("click", function() {
var e = d3.event;
if(e.shiftKey) {
// CANCEL THE EVENT, WHICH WILL PREVENT ANY LINKING FROM OCCURING
e.preventDefault()
}
});
If you still want the link to work — but open in current window instead of new window — you can do this:
d3.select("#prevent_window").on("click", function() {
var e = d3.event;
if(e.shiftKey) {
e.preventDefault()
// Get the href of the <a> tag that was clicked
var href = d3.select(this).attr("href");
window.location = href;
}
});
Here's a jsFiddle. The last example doesn't work because jsFiddle doesn't let you save scripts that contain window.location, so I didn't include the last line (window.location = href;) in the fiddle.
I am making an HTML 5 game which requires the use of right click to control the player.
I have been able to disable the right click context menu by doing:
<body oncontextmenu="return(false);">
Then it came to my attention that if you hold shift and right click, a context menu still opens in Firefox!
So I disabled that by adding this JS as well:
document.onclick = function(e) { if(e.button == 2 || e.button == 3) { e.preventDefault(); e.stopPropagation(); return(false); } };
However, if you hold shift, and then double right click in Firefox it still opens!
Please tell me how to disable this bloody thing once and for all (I'm even willing to revert to some obscure, hacky, and unpractical solution, as long as it works).
You will never be able to entirely disable the context menu in all cases, as firefox has a setting that allows the user to tell the browser to ignore such hijinx as you are trying to pull.
Note: I'm on a mac, but this setting is in pretty uch the same place over all platforms.
That being said, try event.preventDefault() (see Vikash Madhow's comment on this other SO question:
How to disable right-click context-menu in javascript)
There is actually example in official documentation that blocks directly context menu event:
document.oncontextmenu = function () { // Use document as opposed to window for IE8 compatibility
return false;
};
window.addEventListener('contextmenu', function (e) { // Not compatible with IE < 9
e.preventDefault();
}, false);
document.ondblclick = function(e) {
if(e.button == 2 || e.button == 3) {
e.preventDefault();
e.stopPropagation();
return(false);
}
};
How do I determine if onbeforeunload was caused by clicking the close button or a page refresh or generally what event caused onbeforeunload?
here is a snippet:
window.onbeforeunload = function( e ){
if( !e ) e = window.event;
// insert code to determine which is the source of the event
}
Please help me.
Referring to various articles and doing some trial and errors, finally developed this idea which works perfectly for me just the way i wanted it to happen. The logic was quiet simpler it implement as well The idea was to detect the unload event that is triggered by closing the browser. In that case, the mouse will be out of the window, pointing out at the Close('X') button.
$(window).on('mouseover', (function () {
window.onbeforeunload = null;
}));
$(window).on('mouseout', (function () {
window.onbeforeunload = ConfirmLeave;
}));
function ConfirmLeave() {
return "";
}
The ConfirmLeave function will give the pop up default message, it case there is any need to customize the message, return the text to be displayed instead of empty string
See if this helps, :)
As far as I know, there is no way of determining what caused the onbeforeunload. The event is triggered when window is about to close whether closing the browser or some other way.
If the close button was pressed the value of e.clientY is negative. For the other possible sources i doubt there is a solution.
window.onbeforeunload = function() {
var e = window.event;
alert(e.clientX + " / " + e.clientY);
}
I searched for something similar but ended up empty handed.
So I tried doing the opposit
We can identify all the events but browser events.
Refer below (Untested) snippet.
var target = $( e.target );
if(!target.is("a, :button, :submit, :input, .btn, .bulkFormButton")){
//Your code for browser events)
}
$("form").submit(function () {
//Your code for browser events)
});
This worked for me but there are still some events that are not handled.
I am in search of those.
If anyone have idea about them please share.
I have this:
function dontMove(event) {
// Prevent page from elastic scrolling
event.preventDefault();
}
&
<body ontouchmove="dontMove(event);">
This, on the ipad, stops it from being draggable and does not allow that grey background the ipad has when you drag a whole page around to show up.
I have seen on another website that its possible to reverse that in another div, so that div is completely draggable again.
Does anyone know how to reverse it?
I have also tried using this to prevent it (in the document.ready):
document.ontouchmove = function(e){
e.preventDefault();
}
& this to enable it:
function doTouchMove(state) {
document.ontouchmove = function(e){
return state;
}
}
Then I put this to activate it.
<img ontouchmove="doTouchMove(state);" src="../jpeg/pages/01.jpg" class="touch"/>
This didn't seem to work
Is there anything wrong with this?
Or any other way that might work?
This is exactly why bubbles is slightly better(at least in my opinion).
bubbles is cross browser, so you should be able to replace.
e.preventDefault()
with
e.bubbles = false;
and then latter in your code, you could potentially reset bubbles to true.
If the above isn't an option then just ignore. :D
An alternative(if you are just working with an iPad) is to just reverse how the DOM works.
document.addEventListener('click', function(){}, true );
This will force the event to work in the other direction.
Document click execute
|
|
v
Element click execute
try this post, HTML with event.preventDefault and erase ontouchmove from body tag.
Mine looks like this
<script>
// Get touch move enevt from IOS
document.ontouchmove = function (event) {
if (!event.elementIsEnabled)
event.preventDefault();
};
// Get touch move enevt from IOS
function enableOnTouchMove(event) {
event.elementIsEnabled = true;
};
</script>
then enable ontouchmove on every tag you want. ie:
<div ontouchmove="enableOnTouchMove(event)" id="listing">
I managed to solve it with
$('#form1').unbind('submit').submit();
You can solve it by preventing the event only if it comes from the body:
document.ontouchmove = function(event){
if(event.target.tagName == "BODY"){
event.preventDefault();
}
}