onClick event does not work for anchor tags in Firefox

Question

Clicking on my anchor tag, shown below, does not hide the notify-parent div. The notify-parent div is correctly hidden in IE7 and IE8 but not in Firefox.

<script type="text/javascript">
    function checkClick(e) {
        var obj = e.srcElement;
        if (obj.id != "notify-parent")
            document.getElementById('notify-parent').style.display = 'none';

        return;
    }
</script>

<div id="notify-parent" style="padding-bottom: 10px; margin-top: -10px;">
    <table width="800">
        <tr>
            <td>
                &nbsp;
            </td>
        </tr>
        <tr>
            <td align="center">
                <div id="notify-container">
                    <table style="padding: 10 10 10 10">
                        <tr>
                            <td>&nbsp;
                            </td>
                            <td>&nbsp;
                            </td>
                            <td align="right">
                                <a class="close-notify" onclick="checkClick(event);return false" title="dismiss this notification">
                                    ×</a>
                            </td>
                        </tr>
                        <tr>
                            <td>&nbsp;
                            </td>
                            <td>
                                A message goes here
                            </td>
                        </tr>
                        <td>&nbsp;
                        </td>
                    </table>
                </div>
            </td>
        </tr>
    </table>
</div>

I tried adding href="#" but that didn't solve the issue.

What am I doing wrong?

Answer 1

There is no srcElement on the event object in firefox. I can visually see this in firebug. You might consider using target. You can also use a javascript framework that will standardize this across browsers. Can't remember off hand, but I'm sure JQuery does this.

Firebug is awesome btw. I set a breakpoint and included a screenshot for you so that you can see exactly what is in that event object on firefox.

Also see https://developer.mozilla.org/en/DOM/event as a reference.

event.target :: A reference to the target to which the event was originally dispatched

Answer 2

您可以尝试退回目标。

var obj = e.srcElement? e.srcElement : e.target;

Answer 3

well I think the onclick event is working fine in IE. I think your issue is the way the javascript event handling is happening, that works in IE but I don't think it works in firefox.

you can verify the call is being made in firefox by adding an alert("test"); to the first line and it should come up...

instead of trying to do this off the event model why not just pass in to the function the data you are wanting to know...

function checkClick(id) {
        if (id != "notify-parent")
            document.getElementById('notify-parent').style.display = 'none';

        return;
    }

then down below you call it like...

 <a class="close-notify" onclick="checkClick('notify-container');return false" title="dismiss this notification">

It will save you a lot of headache because every browser implements the event model differently.