preventDefault() not working as desired - javascript

<script>
function confirmDel(evt)
{var con =false;
con=confirm('Do you really want to remove this purchase?.');
if(con)
{
return true;
}else
{
event.preventDefault();
}
}
</script>
my html
<a title="View Log" onclick="return confirmDel(this);" href="index.php?mod=tech_support">delete</a>
above code works fine in chrome browser but fails in Mozilla .
but when i use return false instead of event.preventDefault(); it works fine in both.
can anyone explain why this happens

The problem is with event.preventDefault(). The event you're passing is evt, not event. You have to use:
evt.preventDefault();
event.preventDefault() works in Chrome because it mimics old IE behavior for backwards compatibility (just like it also has innerText).
In old IE, the event object was window.event. So calling event.preventDefault() calls the global event object, which works in Chrome and IE, but not Firefox which doesn't implement this non-standard behavior.

Related

Prevent default 'ctrl pageup' and 'ctrl pagedown' in Chrome

I have some code to create hotkeys for a web application. All of the hotkeys work in IE and Firefox, however Ctrl+PgUp and Ctrl+PgDn are not working in Chrome.
After digging around for answers and writing some custom test code, I believe I have determined that this is because those events fire, in Chrome, on keyup instead of keydown.
The default Chrome handlers for those events are firing instead of mine (or at least first) and switching the browser to the next or previous tab. If I use the hotkey to switch back to the tab with my application then my handlers catch the event.
So my question is, is there any way to catch these events in Chrome and prevent the default functionality from running?
The code in question is:
//These work in IE and Firefox
$(this).bind('keydown', 'ctrl+pageup', (evt) => {
this.prevPage();
return false;
});
$(this).bind('keydown', 'ctrl+pagedown', (evt) => {
this.nextPage();
return false;
});
//These catch the event in chrome, but it's too late
$(this).bind('keyup', 'ctrl+pageup', (evt) => {
this.prevPage();
return false;
});
$(this).bind('keyup', 'ctrl+pagedown', (evt) => {
this.nextPage();
return false;
});
It does exactly what I want in IE and Firefox, but not Chrome. I have tried evt.preventDefault(), evt.stopImmediatePropagation and evt.stopPropagation. However, it does not work (I believe because my handlers are being called after the browser handlers).
Check a similar question on this link:
Chrome - Javascript prevent default Ctrl + MouseWheel behavior
They say its impossible on chrome and its still being addressed!

unload event issue in chrome and Firefox

I tried to use unload event, but it seems NOT work in Chrome or Firefox. So I tried another way, the issue is the pagehide callback seems never invoke:
if ("onpagehide" in window) {
window.addEventListener("pageshow", function(){alert("enter page")}, false);
window.addEventListener("pagehide", function(){alert("leave page")}, false);
} else {//for IE
window.addEventListener("load", function(){alert("enter page")}, false);
window.addEventListener("unload", function(){alert("leave page")}, false);
}
I'm not sure about Firefox but Chrome will ignore any alerts called from window.onunload. It will also not let you change any part of the URL, and possibly other things. That may be why it looks like the event isn't firing. To check whether it's firing you can return a string from the handler function, which brings up one of those "Are you sure you want to leave this page?" message boxes.

Jquery load not working on internet explorer after then ready function

In firefox or chrome or other browsers i dont have this problem but in ie not working.
$(document).ready(function(){
$('#divplayer').load("/player/index.php");
$("a.eklebeni").live('click', function(event){
event.preventDefault();
$('.png', this).attr('src', 'img/eklendi.png');
$.get($(this).attr("href"), function(data) {
$('#divplayer').html('<img src="img/player.png" class="png" alt="" />');
$('#divplayer').load("/player/index.php");
});
});
I dont know why but load function not working ?
Thanks
Neither of these a jQuery related solutions... but they're both things you should be aware of in the difference between IE and W3C (everyone else). It looks like you might have coded for the latter which is why in IE it's not working as you expect, but without knowing what's not working this is a big of a WAG.
In IE, window.event gives you access to the event (not the first argument passed to the event handling code) so your function should be:
//...
.live('click',function(event) {
event=event||window.event;
//...
To prevent an event in W3C you should use event.preventDefault(), in IE you need to set event.returnValue=false in order to prevent the default event. Which means changing a change to event.preventDefault():
if (event.preventDefault) {event.preventDefault():}
else {event.returnValue=false;}
I've had this happen a million times with IE caching the content, which doesn't help because there will be no errors or problems reported, it just won't work. Try something like this and see what happens:
$('#divplayer').load("/player/index.php?timestamp=" + (+new Date));

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", "");
}

Categories