Use jQuery Event in inline JavaScript handler

Question

I working on a project and am limited to handling JavaScript events via the inline handlers like onclick and onchange. However, I need my handlers to be cross-browser. I'm used to using jQuery for this, but since I can't use $('#id').click(function() { ... }) I'm having some difficulty getting access to jQuery-style events.

For example, I want do this:

<table>
  <tr onclick="if (event.target.tagName.toLowerCase() !== 'td') return false; ...">
    <td>...</td>
    <td>...</td>
    <td><a>...</a></td>
    <td><a>...</a></td>
  </tr>
</table>

Basically, this code should only handle a clicks on the cells in the table that don't have any anchor sub-elements.

This works fine in Firefox and Chrome and pretty much any browser that uses W3C events. Unfortunately, in IE, it does not work.

What I'd like to do is something like:

if ($.Event(event).target.tagName.toLowerCase() !== 'td') return false; ...

For the onclick handler, but it appears that when you wrap an event in jQuery in this way, it doesn't provide the target field.

What am I doing wrong?

Answer 1

If you check out the jQuery source, you'll see that creating an Event object doesn't do much. All it does is specify the originalEvent, type, and timeStamp properties. What you really want to do is "fix" the default object to work in some kind of cross-browser way right:

$.event.fix(event).target.tagName.toLowerCase() !== 'td'

event.fix is not in the public interface for jQuery, but it seems to do the job...

Check it out here: http://jsfiddle.net/ryleyb/UdJqV/1/