Prevent firing focus event when clicking on div

DEMO here

I think you are missing some parts here,

1. event.stopPropagation() is used to stop the event from bubbling. You can read about it here.

2. event.stopImmediatePropagation() In addition to keeping any additional handlers on an element from being executed, this method also stops the bubbling by implicitly calling event.stopPropagation(). You can read about it here

3. If you want to stop browser events, then you should use event.preventDefault(). You can read about it here

4. click = mousedown + mouseup -> The focus will be set on a HTML element when the mouse down is successful. So instead of binding click event, you should use 'mousedown'. See my demo.

5. 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.

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();
});

Simply,

// ❌ Don't (focus already set on mouse down)
onClick={e => e.preventDefault()}

// ✔️ Do (prevent focus)
onMouseDown={e => e.preventDefault()}