We Keep Coding

ContextMenu event doesn't fire in mobile browsers

ContextMenu event doesn't work at cell phones? I use simple addEventListener("contextmenu", handler). It fires in Chrome Dev Tools, but doesn't fire in real cell phones. I tried it in Android and Windows Phone.
How to make it work?

What version of Chrome / Browser on Android and which version of Windows Phone are you using?
It may be worth adjusting your code to see if the document.addEventListener function is defined, if not then fallback to the older 'attachEvent' function.
Try this:
if (document.addEventListener) {
document.addEventListener('contextmenu', function(e) {
// handler
}, false);
} else {
document.attachEvent('oncontextmenu', function() {
//handler
});
}
Also, what is it you are trying to achieve by overwriting the default context menu behaviour?
When you say '...doesn't fire at real cell phones', does the document.addEventListener line not get hit, or does your handler function not execute correctly. Can you post your handle function code?

Dragging Still Highlights Text

After reading the responses to this question, I have implemented the same functionality where I check for event.preventDefault and either run event.preventDefault() or event.returnValue = false. This seems to have solved the problem for the user in the question but mine is still highlighting text. It is hitting the line event.returnValue = false in IE 7/8. It also works well in Firefox, Chrome, IE 9+.
A little more information: I am using a raphael canvas. I have the mousedown, mousemove, and mouseup events for the canvas all doing their own thing. I implemented the check for event.preventDefault in the mousedown callback function.

If you're comfortable using jQuery, this will solve it cross-browser:
$(function (){
$.fn.disableSelection = function() {
return this
.attr('unselectable', 'on')
.css('user-select', 'none')
.on('selectstart', false);
};
})();

Prototype observe event problem in Opera

I'm using Prototype and doing Event.observe on window.document.
I'm catching enter (keyCode 13) and alt+f (altKey && keyCode=70).
My code is working super with firefox, IE and chrome. With Opera no. Enter is catched, but only if my focus is not in any text input. Alt+F is not working at all.
Is it bug in Prototype or I need to do something 'extra' on Opera in order to go on? As i said, in all other browser my code works....

Firstly, the following is a helpful resource: http://unixpapa.com/js/key.html
Secondly, you should know there is a difference between keydown (or keyup) and keypress. keypress does not typically allow modifier keys, though it does allow some in Opera like control. Better to use keydown for cross-browser consistency.
I get keyCode === 13 in Opera 11.10 no matter whether the textbox is entered or not, and no matter whether using Prototype like this:
Event.observe(document, 'keydown', function (e) {
alert(e.charCode+'::'+e.keyCode);
});
or using the native method directly (using attachEvent for IE):
if (document.addEventListener) {
document.addEventListener('keydown', function (e) {
alert(e.charCode+'::'+e.keyCode);
}, false);
}
else { // IE
document.attachEvent('onkeypress', function (e) {
alert(e.charCode+'::'+e.keyCode);
});
}
However, alt is indeed not detected inside a textbox unless combined with a control or function key (though that doesn't work in Chrome or IE). This may be because Windows uses alt to give access to the applications menu bar.
You could try using control key and using preventDefault() (to avoid default behaviors like ctrl-f doing a page find) though this might annoy your users who might not want their browser behaviors disabled for your page.

Alt-F activates the menu and Opera doesn't let JavaScript handle this key press.

trigger onresize in cross browser compatible manner

I would like to trigger the onresize event from my C# code behind. I think this can be done with
Page.clientScript.RegisterScriptBlock(this.getType(), "id", "javascript code");
I have tried element.onresize() but it doesnt seem to work in firefox. What is the correct way to trigger an onresize event similar to the following jQuery?
$("body").trigger("resize");
Using jQuery itself isn't an option.

This should do the trick, DOM Level 2, no idea whether this works in IE6, quirks mode still has no information on this stuff:
if (document.createEvent) {
var e = document.createEvent('HTMLEvents');
e.initEvent('resize', true, false);
document.body.dispatchEvent(e);
} else if (document.createEventObject) {
document.body.fireEvent('onresize');
}
Tested in FF, Chrome and Opera.

use this $(window).resize();
(tested in FF, chrome, IE8)
// old answer, fails in FF
document.body.onresize()

keydown EventListener in IE7

I've written this code inside the HEAD tags of my HTML page. It works fine in Firefox, Chrome and Safari, but doesn't in IE7. I would like to know how to fix it.
<script type="text/javascript">
if ( window.addEventListener ) {
window.addEventListener("keydown", function(e) {
alert(e.keyCode);
}, true);
}
</script>

Microsoft has implemented their own way of doing this called attachEvent. You can read more about this over at quirksmode.org: http://www.quirksmode.org/js/events_advanced.html

You're screwed: you're using event capturing (passing true as the last parameter to addEventListener). IE has no such equivalent, in any version, including IE8 in IE8 mode.
Is there a reason you must use event capturing rather that event bubbling here? IOW, pass false as your last parameter? Then, you'd be able to port this (somewhat) to use IE's attachEvent proprietary method, or use a library (as others have suggested and added links for).

There is no window.addEventListener in IE, you need to use attachEvent. There's good documentation on events here, or you could switch to using a library that abstracts away browser differences.

Try:
window.attachEvent
More fully:
//set page event handlers
if (window.attachEvent) {
//IE and Opera
window.attachEvent("keydown", "");
} else if (window.addEventListener) {
// IE 6
window.addEventListener("keydown", "");
} else {
//FireFox
document.addEventListener("keydown", "");
}