Develop Reference

preventDefault() on a multiselect, different behavior on FF - IE - Chrome

I'm struggling with the mouse events on a select multiple. I didn't expect to get this difference in behavior across browsers in 2015...
I'm basically trying to simulate the Ctrl+Click only with a click, for easy use. It was working on Chrome, using preventDefault(), by cancelling the default behaviour (select current option and deselect others)
select.addEventListener('mousedown', function(evt) {
evt.preventDefault();
evt.target.selected = !evt.target.selected;
return false;
}, true);
Here is the fiddle, you can check with different browsers:
https://jsfiddle.net/fzvkw1xv/
Chrome -> works as expected
FF -> It's like preventDefault() doesn't
do anything. Other options get unchecked.
IE 11 -> No option get
selected at all
What I want to achieve is full control over the multiselect to make a better user experience.
I couldn't find any documentation related to this, I don't know which browser is the buggy one, or what the standard expected behavior is. Any info on this would be much appreciated. I'm starting to think about making checkboxes look like a multiselect box.
Thanks

Different browsers has different ways to handle events.
There is event bubbling besides event capturing. You need to stop it too.
Discover event propagation model: http://javascript.info/tutorial/bubbling-and-capturing
Try more wide solution:
function (event) {
event = event || window.event // Cross-browser event
event.preventDefault(); // Stop event capturing
// Stop event bubbling
if (event.stopPropagation) { // W3C standard variant
event.stopPropagation();
} else { // IE variant
event.cancelBubble = true
}
return false;
}
http://javascript.info/tutorial/default-browser-action

In client-side JavaScript, is it possible to capture an event and fire it at a later stage?

I'm interested in doing something like this:
...
event.preventDefault();
...
el.dispatchEvent(event);
I tried this in Firefox, which threw an NS_ERROR_ILLEGAL_VALUE exception.
Is it possible to capture an event and fire it at a later stage?
For those that are interested, here's my high-level objective. I'm trying to determine when an underscore is typed into a textarea (i.e. shift + -). Unfortunately, Firefox reports the keyCode and charCode for this event are 0, the same value given to the tilde (shift + `) keystroke. To disambiguate, my idea is to capture the event, suppress its default behaviour, and "release" it on another textarea. I'd then inspect the value of this (hidden) textarea to determine which key was pressed.
Update: I'm using onkeydown, not onkeypress.

As far as I know, an event already in the queue cannot be "reused" because it cannot be "pulled out" of the queue. It's given to you, then to the next handler in line, and so on, but the native delegate is the same for all of them. So, you have to make a new one. Since you're saying you can't get all the data about the event out, that's a problem.
An easier trick may be to watch the textarea for change, and then delete the underscore when it appears in the text. If you want to maintain the cursor position, you can look here for a solution on how to exactly position the cursor (RonPK's response).
Out of curiosity, according to my test here, Firefox 4 reports the correct charCode and shift state. Is this a specific version/OS issue?

What's wrong with:
String.fromCharCode(event.keyCode);
?
E.g. within the event handler:
var character = String.fromCharCode(event.keyCode);
if (character === '_') {
// Do something.
}

Stop bubbling events seems not work on internet explorer in google pages

I am working in a browser extension. I am putting some icons next to links in google search pages. These icons trigger some actions and I need stop bubble events after user clicks on it.
In resume, parent div tags must not know about clicks on these icons.
Next code allow stop bubbling events in all browsers:
if (event.cancelBubble) {
event.cancelBubble = true;
}
if (event.returnValue) {
event.returnValue = false;
}
if (event.stopPropagation) {
event.stopPropagation();
}
if (event.preventDefault) {
event.preventDefault();
}
In Firefox works well but in this context not works in IE (version 8 at least). Any idea about it?

if (event.cancelBubble) {
event.cancelBubble = true;
}
This doesn't make sense. It only sets it to true if it already evaluates to true (in a boolean context). Get rid of the if clause (i.e. always set it unconditionally); setting a non-existant value usally doesn't do any harm (unless you are setting it on a host object which has an ugly implementation)

or try setting it to false, if u use true, the event will fire the code that comes after the event has been fired, when an event has a boolean, it could sometimes mean that u have the freedom to control that event, if u say true, the event may execute other function(s). when saying false the event will not execute other functions, but that only depends on how that function.
coder made his function/code.
but in simple words
"To handle or to raise the bubbled event, a control must override the OnBubbleEvent method.", and thats where u do the opposite dont override if u did.
if u havent read this yet http://msdn.microsoft.com/en-us/library/aa719644(v=vs.71).aspx and like i said do the opposite.
; )
Hope this helps u out a bit
Laterss!

How to trace or debug all available javascript events

How can I trace all Javascript events of a web page?
Is there a possibility to trace all events, even such without a handler attached?
Is there any tool out there, that can do this?
Clarification:
For example:
For a text input I can add an event handler for onblur and onchange.
If I (in the browser) change the value of the textfield and leave it, both eventhandlers are executed.
Now I would like to know which other events I "have missed" (the ones which would have been executed if there was an eventhandler attached).
Clarification2:
Can I get a list(on a given element) of all possible events I can attach an eventhandler?

Here is a list of Javascript events:
https://developer.mozilla.org/en-US/docs/Web/Events

Here's a simple script to log all available events in the browser's console:
var ev = '',
out = [];
for (ev in window) {
if (/^on/.test(ev)) {
out[out.length] = ev;
}
}
console.log(out.join(', '));
Of course you'll get only the events of the browser you're currently using.

This is my favorite reference, it is updated more frequently than some of the other posts: https://developer.mozilla.org/en-US/docs/Mozilla_event_reference?redirectlocale=en-US&redirectslug=DOM%2FDOM_event_reference

You can use FireBug Profiling Tool on FF and Web Developer Tool on IE8 or Developer Tools on WebKit
EDIT:
Just curious though, what do want to do with those events?

Javascript detect when drop down list is closed

Because of the issue explained in this question I have a situation where I need to attach the mousewheel event to the drop down list only when it is expanded (I do this in the onclick event). However I need to remove the mousewheel event when the list collapses. How do I go about detecting this?
I can't just use the onchange event because the user may not have actually changed their selection. I've tried the onblur event but in most browsers (except IE) the drop list stays focused when the list is collapsed.
Cheers.
var list = document.getElementById("list");
list.onclick = function (e) {
// attach mousewheel
list.onmousewheel = function (e) {
// ...
}
// attach click off
// This event fires fine in all browsers except FF when the list is expanded.
// In firefox it only fires when anywhere in the document is clicked twice.
// The first click closes the drop down list as expected and the second one
// fires the event.
window.document.onclick = function (e) {
list.onmousewheel = null;
window.document.onclick = null
}
};
EDIT:
Unfortunately meder's solution doesnt work in firefox. The click event on the document doesn't get fired until i click twice off the drop down list. How do I get around that? It works fine in IE.
EDIT2:
I've done some more testing and the following browsers behave as expected
IE 7,
Chrome 3
Opera 10
Firefox requires 2 clicks in the window to make it work & Safari doesn't work at all.
It appears that even when you click off the drop down list firefox maintains focus on it. It's not until the second click occurs that the drop down list eventually loses it's focus.

Are you looking for something like this? If the user clicks anywhere that's not within #el, it will branch out and you can do what you want, though this requires jQuery but it would take far too many lines of DOM Scripting.
var dropdown = $('#el');
$(document).click(function(e){
if ( (!$(e.target).is(dropdown)) || !$(e.target).closest('#el').length ) {
// do what you need to
}
});
If not, can you be more specific and include an example?
PS - I did not test the snippet, sorry if it isn't what you want.

OK, I still have no idea what you're trying to achieve with such a tightly-scripted select box, but in general trying to change the internal working of a native <select> isn't fruitful. There's no standard that says how events flow internally to the form element, and browsers that implement select as an OS-level widget (IE) can't do much to support it anyway.
If you must have this behaviour, I'd suggest using scripting to replace the <select> box on-fly with a JavaScript-powered analogue made out of <div>s. Then you can control exactly how each mouse and keyboard interaction behaves. There are many libraries that do this already, though again if you need to be very specific about the exact behaviour they might not suit you.