Prevent firing focus event when clicking on div
JavascriptJqueryJquery EventsJavascript Problem Overview
This question is similar to my previous question, https://stackoverflow.com/q/8689716/931340, but this time the main topic is, How to prevent focus event from triggering when I click one of the divs. Last time I had one div with tabindex='-1' to make it focusable on click, now I have a list of divs with tabindex>0 so they can gain focus when tabbing as well.
<div tabindex='1'>Div one</div>
<div tabindex='1'>Div two</div>
<div tabindex='1'>Div tree</div>
<div tabindex='1'>Div four</div>
some styling:
div {
height: 20px;
width: 60%;
border: solid 1px blue;
text-align: center;
}
div:focus {
border: solid 2px red;
outline: none;
}
Now I'm using a flag(action) to fire an action(alert) when clicking the div for 2nd time, and with just one click if it's already focused,with TAB for example.
var action = false;
$('div')
.click(function(e){
e.stopImmediatePropagation();
if(action){alert('action');}
action = true;})
.focus(function(){action = true;})
.blur(function(){action = false;});
The problem with the code above is focus event is being fired, which means stopImmediatePropagation doesn't work the way I expected.. The two click action works commenting the focus event line, but you still need to double click when div gains focus on TAB. Here is the example: http://jsfiddle.net/3MTQK/1/
Javascript Solutions
Solution 1 - Javascript
DEMO here
I think you are missing some parts here,
-
event.stopPropagation()
is used to stop the event from bubbling. You can read about it here. -
event.stopImmediatePropagation()
In addition to keeping any additional handlers on an element from being executed, this method also stops the bubbling by implicitly callingevent.stopPropagation()
. You can read about it here -
If you want to stop browser events, then you should use
event.preventDefault()
. You can read about it here -
click = mousedown + mouseup
-> The focus will be set on a HTML element when the mouse down is successful. So instead of bindingclick
event, you should use 'mousedown'. See my demo. -
You cannot use 1 action boolean value to determine which div is clicked and how many times it has been clicked. Check my Demo to see how you can handle that.
Solution 2 - Javascript
To simply prevent firing focus when clicking on div just use mousedown + event.preventDefault()
. Use mousedown rather than click because, as @Selvakumar Arumugam explained, focus fires when mousedown is succesfull and event.preventDefault() will stop browser events (including our focus).
Here's a code example:
$('#div').on('mousedown', function(event) {
// do your magic
event.preventDefault();
});
Solution 3 - Javascript
Simply,
// ❌ Don't (focus already set on mouse down)
onClick={e => e.preventDefault()}
// ✔️ Do (prevent focus)
onMouseDown={e => e.preventDefault()}
Solution 4 - Javascript
For the moment the apparent answer would be to restrict your selector from simply 'div' to a system of toggled class names, thereby you could control on what element your focus event would fire. It is more tedious and requires a bit more exception coding, but would do the job.