We Keep Coding

e.preventDefault() and e.stopPropagation() not working as expected

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;

Disable taphold default event, cross device

I'm struggling to disable default taphold browser event. Nothing that I have found on Google provided any help. I have only Android 4.4.4 mobile and Chrome dev tools for testing. I tried CSS fixes, such as webkit-touch-callout and others, but apparently they don't work for Android, also they don't work in Chrome dev tools.
I also tried detecting right click, (e.button==2), it doesn't work.
I came up with a solution, but it solves one problem and creates another. I just want to have a custom action for 'long press' event for selected anchors and I don't want the default pop up to appear (open in a new tab, copy link address, etc.)
This is what I did:
var timer;
var tap;
$("body").on("touchstart", my_selector, function(e) {
e.preventDefault();
timer = setTimeout(function() {
alert('taphold!');
tap=false;
},500);
});
$("body").on("touchend", my_selector, function() {
if(tap) alert('tap');
else tap=true;
clearTimeout(timer);
});
It successfully disables the default taphold event and context menu doesn't appear. However it also disables useful events, such as swipe. The links are in a vertical menu and the menu is higher than the screen, so a user has to scroll it. If he tries to scroll, starting on an anchor, it won't scroll, it will alert 'tap!'
Any ideas how could I disable taphold default or how could I fix this code so it disables only tap events and leave default swipe events enabled?
Edit: Now I thought about setting a timeout, if the pointer is in the same place for lets say 100ms, then prevent default action. However e.preventDefault(); doesn't work inside setTimeout callback.
So now I'm just asking about the simplest example. Can I prevent default actions after certain amount of time has passed (while the touch is still there).
And this is my whole problem in a fiddle. http://jsfiddle.net/56Szw/593/
This is not my code, I got this from http://www.gianlucaguarini.com/blog/detecting-the-tap-event-on-a-mobile-touch-device-using-javascript/
Notice that while swiping the box up and down, scrolling doesn't work.

I got the solution. It was so simple! I had no idea there's an oncontextmenu event. This solves everything:
$("body").on("contextmenu", my_selector, function() { return false; });

For an <img> I had to use event.preventDefault() instead of return false.
document.querySelector('img').addEventListener('contextmenu', (event) => {
event.preventDefault();
}

IE 10 - div with scrollbar fires blur event causing it to hide (custom code)

We are using W2UI (Javascript UI) controls. It has a "Multi Select" input control with associated div container with suggestion data. Whenever user clicks on input control a suggestion div is popped up and user can select multiple items from the list. Please find below screenshot
We have set overfloaw:auto of div When suggestion list has more than 10 records. (Refer below screenshot)
At this point, clicking on scrollbar works fine in Chrome and Mozilla but in case of IE it closes / hides the div.
We have made initial RCA of this as follow.
When a scrollbar is associated to a div, clicking on scrollbar causes blur event to fire for that div.
In W2UI library, blur event is used to hide the suggestion div causing it to close. We also found that, clicking on scrollbar does not cause blur event to fire in chrome & firefox.
Now we want to suppress blur event when user clicks on "scrollbar" in case of IE.
We are unable to identify scrollbar click.
Please share your thoughts / workarounds about suppressing blur() event conditionally.

I am also facing same issue we have made some changes in w2ui lbrary
we have set global variable flagClick first time it is false. & added below events
var div = $('#w2ui-global-items');
div.on('mouseover', function (event)
{
flagClick = false;
$('.w2ui-list').find('input').focus();
});
div.on('mouseout', function (event)
{
flagClick = true;
});
and changed blur event logic of div
as below --
.on('blur', function (event)
{
if (flagClick)
{
$(div).css('outline', 'none');
obj.hide();
if (event.stopPropagation) event.stopPropagation();
else event.cancelBubble = true;
}
})
almost this logic have solved our issue, except one .
When we click on search textbox then list will populate , if after that we click on list scroolbar and after that click on outside list div , List not getting hide (div blur event not getting fired).
try this solution , it will help u .
If you get solution to our problem pls post on same .

An updated version of w2ui came out just a few days ago where controls, including multiselect, have been refactored. It seems to work fine for me with 1.4 version.

Dropdown plugin closing on scroll bar click

I'm in the process of teaching myself how to write a jQuery plugin. I am using the jquery-hover-dropdown-box as a base example. It's not just copy/paste though, I've made a number of changes trying to get a better understanding of it all. For example I'm not incorporating the hover event, I added a filter, and currently not using any defaults to name a few. Clicking on a div's scroll bar fires the blur event in I.E is the only post I've found with what looks like a good resolution to this and I tried implementing something similar but was unsuccessful.
Complete Example: jsFiddle
Issue:
I click in the input and the dropdown opens but the first time I click on the scroll bar, the dropdown closes. When I open the dropdown a second time and click on the scroll bar, it does not close (as I would expect). From what I can tell, my issue is in the blur on the input. I understand that when I click in the scroll bar, the input has lost focus. I tried to implement something similar to this post on Scrollbars not working on dropdown in IE8 but was unable to get it working.
Steps to Reproduce:
Click in the input to open the dropdown
Click anywhere in the scroll bar and the dropdown closes (should stay open and scroll)
Click in the input a second time and the dropdown opens
Click anywhere in the scroll bar and the dropdown stays open (as it should)
Question:
What am I doing wrong that is causing the dropdown to close only the first time I click on the scroll bar?
What I've Tried:
When I'm appending the ul to the div (currently commented out around line 68 in the jsFiddle), I added the code below. I figured that if I stopped the action from being triggered with a mousedown on the ul it would fix my issue. Although it did fix the issue in Chrome, it persists in IE8.
Update: I changed the code below from $list.mousedown... to $container.mousedown... since $list is the ul and $container is the div that contains it. My thought was that it extend the area. The result was the same though.
...
$container.append($list);
$list.mousedown(function(e) {
e.preventDefault();
});
...
Since this seemed to be close, I tried taking a similar approach in the blur event. The issue explained above happens when I use this code. In Chrome, clicking the scroll bar does not fire the blur event but in IE8, it does. The first time the dropdown is opened and you click in the scroll bar, it logs "hiding". Open the dropdown again and click the scroll bar and it logs "bind mousedown". Click anywhere outside the dropdown and it closes (as it should) and logs "hiding" (as it should). To me it seems backwards, but obviously I'm not understanding it correctly. (The code below is around line 134 in the jsFiddle)
Code edit: Updated with Goran.it suggestion to prevent multiple bindings from happening.
...
// where $dom is the 'div' containing the 'ul'
$dom.unbind('mousedown.auto_dropdown_box_ul')
.bind('mousedown.auto_dropdown_box_ul', function(e) {
console.log('bind mousedown');
e.preventDefault();
});
setTimeout(function() {
console.log('hiding');
$dom.addClass('auto_dropdown_hide').hide();
}, 100);
...
I've also tried removing the blur event. I know this would prevent the dropdown from closing if you tabbed out of the input but figured it was worth a try. In Chrome it works exactly how I expected, clicking outside the input closes the dropdown, clicking the scroll bar does not close it and tabbing out does not close it. In IE8, clicking outside the dropdown does not close it though, nor does it close when you tab out, but clicking in the scroll bar does work. This is the code I added after removing blur (it's not included in the jsFiddle).
// below where the 'blur' event was
$(document).click(function(e) {
if (e.target == dropdownArray[0].input[0] || e.target == dropdownArray[0].dom[0]) {
console.log('matches');
e.preventDefault();
} else {
console.log('does not match');
dropdownArray[0].dom.addClass('auto_dropdown_box_hide').hide();
}
});
Again, this is my first attempt, I'm still learning. I'm sure there are multiple things that I'm probably doing wrong, that I can improve, etc. Before I tackle those, I would just like to understand what I'm doing wrong here and what I need to do to correct it. After reading the plugin concepts, I know there is much for me to learn.

I found few issues on a first look, you should change the :
$dom.bind('mousedown.auto_dropdown_box_ul'
to:
$dom.unbind('mousedown.auto_dropdown_box_ul').bind('mousedown.auto_dropdown_box_ul'
To prevent multiple events binding to the dom node, you can also use .one event handling of jQuery.
In the same event handling you should also put:
console.log('bind mousedown');
e.preventDefault();
return false;
To be sure event is not firing.
Hope this helps (I'm not having IE8 for a long time now)

I believe I finally figured this one out. After multiple tries I thought I'd change up the format to one that seemed, at least to me, a little more straight forward.
Here is the complete jsFiddle
The underlying fix was correctly setting/adjusting which element has focus and when. Since mousedown executes before click, I stuck with that event on the dropdown. In the mousedown event, I set isVisible = true and set focus back on the input (although the latter is not completely necessary). In the blur event, I'm checking isVisible. If it's true, that means that a click happened in the scroll bar so don't close the dropdown. If it's false, close the dropdown. Throughout events, I'm keeping track of isVisible so I know it's state when blur executes. Again, I changed up the format so the two fiddles do look different. I'm sure I could go back and implement something similar to the original fiddle and get it working but I just liked this way more. Here is a snippet of the relevant changes:
{
// some code above
// where $list is the 'ul'
$list.bind('mousedown', methods.onDropdownMousedown);
// where $obj is the 'input'
$obj.bind('blur', methods.doOnBlur);
},
onDropdownMousedown: function(e) {
$input.focus(); // not really needed, just in case
isVisible = true;
},
doOnBlur: function(e) {
if (isVisible) {
$input.focus();
isVisible = false;
} else {
// where $container is the 'div' containing the list
$container.addClass('auto_dropdown_box_hide').hide();
isVisible = false;
}
isVisible = false;
}

Space and enter "click" on the input that's focused. How do I disable this behavior?

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.