The app in question is basically a DOM inspector tool similar to the one available in Chrome Dev Tools made using plain JS. Basically when the user clicks on an element attributes such as class names, xpaths and texts should be available to the user. I have run into a problem which is: When a user clicks on an element such as a link or a button, the browser navigates to the intended page. I have tried to prevent this problem using the following piece of code:
var target = getSelectedElementFromPoint(e.clientX, e.clientY); // target has the element the user wants to inspect
if(target.nodeName.toLowerCase() == "a" || target.nodeName.toLowerCase() == "button"){
e.stopPropagation(); // e is the event
e.preventDefault();
}
The intention of the code is to get the element the user clicks on, check if it is an anchor tag or a button and if so, stop the event from progressing further. However, it does not work as expected as, on mouse click, it still navigates to the page.
Any help would be appreciated.
EDIT: Please note that I cannot use jQuery in this particular instance. Thanks
EDIT2: Probably should have mentioned this earlier but I forgot.
I have actually tried return false as well. Using return false achieves the required functionality but the only problem being, once the user leaves the "Inspect mode" that link is no longer clickable and that is not desirable behavior.
Basically what I want is that when the user enters the "Inspect mode" for all links to be unclickable. And these links should be clickable once "Inspect mode" is removed. Rather than disable all links on the page, I thought of disabling the one the user clicked on.
The solution is to simply wrap your code in a check for 'inspectMode'. 'inspectMode' should be a boolean var.
Add the foloowing code to your eventhandler:
if (inspectMode)
{
var target = getSelectedElementFromPoint(e.clientX, e.clientY);
if(target.nodeName.toLowerCase() == "a" || target.nodeName.toLowerCase() == "button")
{
e.stopPropagation(); // e is the event
e.preventDefault();
return false;
}
}
return true;
Related
I tried the solution based of lots of examples and the event works only if something else is clicked first eg. a link has been first right clicked on the same page. Then if I click the browser close button it prompts a warning before closing as expected.
Otherwise if I first go to the page or refresh it and click close button it doesn't work and page closes. The code inside onbeforeunload function hits each time but in the last case clearly has no effect.
$("button, a").bind("click", function () {
window.onbeforeunload = null;
});
window.onbeforeunload = function (e) {
e = e || window.event;
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Sure?';
}
// For Safari
return 'Sure?'; // the code hits each time - normally it does have no effect but if right-clicked a link on the page first it does work?
};
It looks as a very strange behaviour. Anyone has idea why this works only when another event has happened on the page first?
Tried in Firefox & Chrome.
It's a feature. According to MDN:
To combat unwanted pop-ups, some browsers don't display prompts created in beforeunload event handlers unless the page has been interacted with; some don't display them at all.
What is the use case where you need the onbeforeunload popup to be shown even with no user interaction? Usually these are for preventing data loss on unsubmitted forms, for instance. If the user wants to leave the page and there isn't any reason to show the popup, you shouldn't attempt to do so.
Most likely this question has been asked many times before, but as far as I could see, the same responses are given and they do not work for me.
The problem is the following: I have a button control that is rendered as a table and inside this table I have a smaller button. The requirement is that clicking the outer button should show one message and clicking on the small inner button should show another message.
I have the code inside this fiddle: http://jsfiddle.net/DZFEZ/3/
$('#mine').click(function (evt) {
alert("big button click");
});
$('#mine-fav').click(function (evt) {
alert("small button click");
var event = evt || window.event; // cross-browser event
if (event) {
event.returnValue = false;
event.cancelBubble = true;
event.stopPropagation();
event.preventDefault();
}
});
This code works ok on Chrome (and I suspect Opera/Safari. did not check as I cannot install those browsers), but on IE9+ and Fireforx it does not. The event is just triggered on the big outer button, no matter if I click on the small one.
Anybody has any clue why?
Thanks,
Marius.
To resolve your problem just replace outer button to div.
Because i think that the button in atomic at those browser and there are some difference in browsers implementation.
You should use elements as expected.
Working demo
In chrome and firefox (and maybe others), if you've got an input focused, pressing "space" and "enter" clicks them for you. I'm making an HTML 5 game and I want to rewrite how space and enter reacts on focus and the default behavior is getting in my way. Is there a way to turn this default behavior off in most browsers?
Here's a jsfiddle demonstrating the problem.
<button>Button<button>
$("button").on("click", function(event) { alert("Clicked"); });
If you click on the button, it displays the alert which is good. But if you press "space" or "enter" after you click it, it also alerts. I want to prevent this behavior so that I can write my own without them interfering.
You can fix this by using event.detail. That will return the amount of times the button has been clicked. If you press enter, this returns 0, since you clicked it 0 times, and if you click it via your mouse, it returns the amount of times you clicked the button.
To access event.detail, you need to access the original event object. This can be done via event.originalEvent in the jQuery event object. So, if you just put an if statement in your script:
if (event.originalEvent.detail != 0) {
//your click event code
}
then it'll only run if you actually click the button via your mouse.
This will be much more accurate than checking if the button has :focus, since the button automatically gets focused when you click it, so doing that would disable the button after a single click.
Check if a button is active:
$("button").on("click", function(event) { alert("Clicked"); });
$(document).on('keydown', function(e){
if($(document.activeElement).is('button') &&
(e.keyCode === 13 || e.keyCode === 32))
e.preventDefault();
});
You could also use jQuery's :focus selector, which should return the same element, $(':focus').is('button').
http://jsfiddle.net/zmH5V/4/
other option, is to blur the object right after clicking it:
<button id="mybutton" onclick="myFunction();this.blur();">button</button>
I find that solution easier to use, because it requires less code-lines, and gets the same results:
while the button is blured, it has no contact with the keyboards events, and that solves the problem.
Anchor tag is opening in new window while we have clicked middle button of mouse. I want to disable this new window/tab. The belwo provided code is working in chrome.
$("a").on('click', function(e) {
if( e.which == 2 ) {
e.preventDefault();
}
});
Checked following links:
Triggering onclick event using middle click
Disable middle mouse button for modal dialog
According to some better is to change anchor tag to some other tabs, but I need the default behavior of anchor tab in left click, I need to disable middle and right clicks. Somebody help me to solve this.
Note: Many questions are asked regarding the same, but this exact issue is not yet asked.
This is not working in Firefox. I need to solve this issue in Firefox too.
fiddle
This is for blocking middle clicking entire document on firefox. You can check whatever element by e.target. Its need jQuery, but u could also use vanilla js
$(document).on('auxclick', function(e) {
if( e.button == 1 )
alert('Its blocked globally');
e.preventDefault();
return false;
}
})
Pure html solution, no javascript:
Click me
I'm building my first application where I have to have compliance with keyboard navigation for accessibility reasons.
My problem has to do jquery-ui modal dialog boxes. If the user presses tab on the last control of the dialog (cancel button for this app), focus goes outside of the dialog box. Or presses shift-tab on the first control in the dialog box.
When the user does this, it isn't always possible to tab back into dialog box. IE8 and FF8 behave somewhat differently in this respect. I've tried to capture the tab key with the following event handler -
lastButton.keydown(function (e) {
if (e.which === TAB_KEY_CODE) {
e.stopPropagation();
$(this).focus();
}
});
But this doesn't work as it appears the browser processes the key press after jquery is done.
Two questions -
For Accessibility compliance, do I even have to worry about this? Although, for usability reasons, I think that I should.
Is there a way to make this work?
My problem has to do jquery-ui modal dialog boxes. If the user presses tab on the last control of the dialog (cancel button for this app), focus goes outside of the dialog box. Or presses shift-tab on the first control in the dialog box.
... and then tabbing occurs below the modal box, under a grey semi-transparent layer with scrollbar jumping from bottom to top after a few keypresses? Yes, this is a concern for sighted users who use the keyboard to browse and won't know how to go back to the modal box without pressing Tab a hundred times. Blind people won't even know the modal box is still displayed (they still can see/hear the entire DOM with their screen reader!) and that the page/script is waiting for a submit or cancel decision so it's also a concern for them.
An example done right is shown at http://hanshillen.github.com/jqtest/#goto_dialog (click on Dialog tab, direct link with anchor doesn't work :/ ). It'll tab forever inside the modal box till you click on Close or OK and will put you back on the focused element that triggered the modal box (I think it should focus the next focusable element after leaving the modal box but nevermind, this isn't the biggest accessibility problem here).
This serie of scripts is based on jQueryUI and are highly improved for keyboard and ARIA support and any accessibility problem that could exist in the original scripts. Highly recommended! (I tried to mix jQuery UI original scripts and these ones but didn't manage to get anything working, though you don't need to do so: these scripts work fine by themselves)
Maybe you should prevent the default action with preventDefault() instead of stopping the propagation and use keypress instead of keydown.
In this way there should be no need to regain focus.
Stopping the propagation doesn't work because it just prevent the event from bubbling up. You could think about using stopImmediatePropagation() but i think that changing input on the pression of the tab can't be stopped that way and preventDefault() is more correct.
lastButton.keypress(function (e) {
if (e.which === TAB_KEY_CODE) {
e.preventDefault();
}
});
fiddle here: http://jsfiddle.net/jfRzM/
Im a little late to the party, but I found I had to call preventDefault in the other keyboard events as well.
ex) I was setting the focus in the keyup event. But the browser was still doing its thing in either keydown or keypress. So I had something like this (I used JQuery/Typescript, but the idea should translate to about anything):
elem.keyup(this.onDialogKeyPress);
elem.keydown(this.onDialogPressPreventDefault);
elem.keypress(this.onDialogPressPreventDefault);
...
private onDialogPressPreventDefault = (e: KeyboardEvent) => {
const keys = [9, 27];
if (keys.includes(e.which)) {
e.preventDefault();
return false;
}
}
private onDialogKeyPress = (e: KeyboardEvent) => {
// Tab
if (e.which == 9) {
e.preventDefault();
// Do tab stuff
return false;
}
// Esc
else if (e.which == 27) {
e.preventDefault();
// Do Esc stuff
return false;
}
}