Click event fires in IE/Firefox, but Chrome is dropping the event assignment

javascript google-chrome debugging dom-events

10,747

I wasn't able to determine why this was happening in Chrome and none of the other browsers. But registering the script to execute on PageLoad solved the problem.

<body onLoad="DefaultButtonFix()">

10,747

Author by

Harish2k22

See my website for an up-to-date bio.

Updated on July 01, 2022

Comments

Harish2k22 almost 2 years
I'm in the process of debugging my web application and have hit a wall. I'm experiencing a behavior in Google Chrome only and my javascript ineptitude is keeping me from the solution.

I have an ASP page with an <asp:Panel> control. Within the panel, I've setup a simple search textbox and am using an <asp:LinkButton> to launch the search. The user enters their search text and should be able to hit enter (for usability sake) and the search results will display. This works in IE, but not in FireFox. There is a documented fix which I've applied to my page and have successfully gotten FireFox to function. Golden.

Except, the fix doesn't work in Google Chrome! A bit fishy, I fire up Firebug to debug the code... oh wait... it's a Chrome only issue. OK, fine I can handle debugging javascript without Firebug (sob) - I fire up the Chrome debugger and step through the code. It turns out that the javascript fix, previously mentioned, is being dropped by Chrome.

The fix script runs on page load and modifies the click handler of the LinkButton:
```
var defaultButton = document.getElementById('<%= lnkSearch.ClientID %>');
if (defaultButton && typeof(defaultButton.click) == 'undefined') {   
    defaultButton.click = function() {
        alert('function fired');
        var result = true;
        if (defaultButton.click) result = defaultButton.onclick();
        if (typeof(result) == 'undefined' || result) {
            eval(defaultButton.getAttribute('href'));
        }
    };
    alert(typeof(defaultButton.click) != 'undefined');
}
```
And when running the page in the chrome debugger I step into function WebForm_FireDefaultButton() and get to the line:
```
if (defaultButton && typeof(defaultButton.click) != "undefined") { ... }
```
and for some reason defaultButton.click has become "undefined". I'm stumped... What am I missing?

Also, I'm not using jQuery and it isn't a viable solution.
The HTML produced:
```
<div id="abc_pnlSearchPanel" language="javascript" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'abc_lnkSearch')"> 
    <div class="searchPanel"> 
        <span class="searchText"> 
            Type in stuff to search:
        </span> 
        <span style="float: left;">
            <input name="abc:txtSearch" type="text" id="abc_txtSearch" style="width:312px;" />
        </span> 
        <a onclick="this.blur();" id="abc_lnkSearch" class="ButtonLayout" href="javascript:__doPostBack('abc$lnkSearch','')"><span>Search</span></a> 
        <div style="clear: both"></div> 
    </div> 
</div> 
```