event.returnValue gives me an error in IE7

Question

So I started off with the error because e.preventDefault doesn't work in IE7. I found event.preventDefault() function not working in IE on here and implemented the answer - the problem is that where

event.returnValue = false; 

seems to work for everyone else there, it doesn't for me! I also put in

if (event.returnValue) {
    alert();
}

And got no alert. Here is my code

$('#share a').click(function(e){

   if (event.preventDefault) {
        event.preventDefault();
    } else {
        window.event.returnValue = false;
    }

    if ($(this).parent('li').hasClass('email')) {
        window.open(this.href,'share-this','height=750,width=500,status=no,toolbar=no');
    } else {
        window.open(this.href,'share-this','height=400,width=500,status=no,toolbar=no');
    }
}

When I click the link I get an Invalid argument error in IE7 on the ternary operator line. I know it is hitting event.returnValue = false; because I put an alert in there to debug.

Any ideas?

Answer 1

Ternary operators don't work like that. This statement:

event.preventDefault ? event.preventDefault() :  event.returnValue = false;

Is invalid. You should use:

if(event.preventDefault)
  event.preventDefault();
else
  event.returnValue = false;

Ternary operators work as r-values, not as general if/else statement replacements.

Also, for IE < 9 you should use the global window.event ( window.event.returnValue ).

Update

Actually, ternary operators seem to work like that in Javascript (so it's not invalid). It's still a "cheat" according to the ECMA specifications and IMHO, it hurts readability of the code (for programmers who can distinguish between lvalues and rvalues, at least).

Answer 2

Your code looks as though you're using jQuery. If you're handling an event that was bound using a jQ function, like on , delegate or bind , jQ will wrap the event object for you. You should have access to jQ's preventDefault() , stopPropagation() and stopImmediatePropagation() methods, rendering your ternary irrelevant.
If you're binding the event yourself, make sure the event variable isn't undefined:

elem.onclick = function(e)
{//e should contain the event object, except for IE<9
    e = e || window.event;//old IE's set the event as a property on the global object
};

If you find this a ropey, and who can blame you, you could augment the Event.prototype . I do this for code that needs to support old versions of IE, and it hasn't let me down yet...

The ternary operator can't be sure how to evaluate the statement event.preventDefault ? event.preventDefault() : event.returnValue = false event.preventDefault ? event.preventDefault() : event.returnValue = false . You might mean for the JS engine to interpret the code as (event.preventDefault ? event.preventDefault() : event.returnValue) = false (assign false to the result of the ternary) or (event.preventDefault ? event.preventDefault() : event.returnValue = false) (treat the entire statement as a ternary expression).

To avoid this ambiguity, group the assignment expression, to let JS know that the assignment is the or part of the ternary:

event.preventDefault ? event.preventDefault() :  (event.returnValue = false);

Having said that, using a ternary as a statement is generally considered to be bad practice. a far more common way of writing your code is:

e.returnValue = false;//returnValue is set on Chrome and, I believe FF, anyway
//if some browser Event objects don't have this, there's no harm in adding a property
//if the event object is read-only, the assignment will fail, silently
if (e.preventDefault)
{
    e.preventDefault();
}