Click events are not working in Chrome, but event fires when we execute it manually from console

Question

From hours I am trying to find the root cause for one of tricky customer issue. Help is appreciated.

None of the clicks events in client Chrome browser is firing.

But when we call the JavaScript method from console it fires!

In the attached image you can see, how I triggered the event

Tried removing "data-bind" attribute and added simple "onClick", still does not work. none of the buttons in web site working :(

Here is code

<div class="row butrow p0 pb20 pt10">
<div class="col-md-12 text-left ">
    <div class="form-group">
        <div class="col-md-6 text-left pl0">
            <input type="button" style="display: inline;" class="resbut" value="@SchedulingSystem.Clear" id="btnClear" data-bind="click:AppointmentView.ClickClear"/>
            <input type="button" style="display: none;" class="resbut" value="@SchedulingSystem.SkipNAdd" id="btnSkipNAdd" data-bind="click:AppointmentView.ClickSkipNAdd"/>
        </div>
        <div class="col-md-6 text-right">

            <input type="button" data-bind="click:AppointmentView.SelectSearchCustomer" value="@SchedulingSystem.Select" class="subbut" id="btnSelectSearchCustomer"/>
            <button id="btnSearchCustomer" type="button" data-bind="click:AppointmentView.SearchCustomer" class=" resbut"> @SchedulingSystem.Search_Customer</button>
            <input type="button" style="display: none;" class="resbut" value="@SchedulingSystem.AddNewCustomer" id="btnAddNewCustomer" data-bind="click:AppointmentView.ClickAddNewCustomer"/>
        </div>
    </div>
</div>

None of them are getting fired.

In IE and FireFox all buttons working as expected, issue is only on chrome

Solution

Laptop was touch screen based!!

1.Type below in chrome browser :

chrome://flags/#touch-events

2.In the enable touch events section ,please select "Disable" from the drop down.

3.Click on "Relaunch Now"

Answer 1

Answer

Since the user laptop was "HP Elitebook 840",it was touch screen enabled.

So solution was disabling the touch screen

1.Type below in chrome browser :

chrome://flags/#touch-events

2.In the enable touch events section ,please select "Disable" from the drop down.

3.Click on "Relaunch Now"

Answer 2

I realize that this is an old post, but since the problem described still occurs I will provide my solution to it:

I do not have a touchscreen laptop, so I was not experiencing the issue myself - yet I needed to replicate it if I was to resolve it. So, I went into chrome://flags/#touch-events and set Enable touch events to Enabled.

I reloaded Chrome, opened the developer console and pressed ⌘+⇧+M to open the Device Mode window (it seems that this last part isn't strictly necessary).

Now I was able to replicate the problem - listeners for click events never fire.

In researching the issue I stumbled across library - Tocca.js. Its description reads:

Super lightweight script (1kb) to detect via Javascript events like 'tap' 'dbltap' 'swipeup' 'swipedown' 'swipeleft' 'swiperight' on any kind of device.

To see what event, if any, does fire, I attached all of the event handlers that Tocca.js provides to an element exhibiting the problematic behavior:

var $elm=$('.log-in').last()
$elm.on('tap',function(e,data){ console.log(e,data); });
$elm.on('dbltap',function(e,data){ console.log(e,data); });
$elm.on('longtap',function(e,data){ console.log(e,data); });
$elm.on('swipeleft',function(e,data){ console.log(e,data); });
$elm.on('swiperight',function(e,data){ console.log(e,data); });
$elm.on('swipeup',function(e,data){ console.log(e,data); });
$elm.on('swipedown',function(e,data){ console.log(e,data); });

Then I clicked the button - and - eureka - console output!

r.Event {type: "tap", originalEvent: TouchEvent, timeStamp: 1471550288951, jQuery310022933444763555788: true, isTrigger: 3…} Object {x: 897.4290161132812, y: 264.85699462890625, distance: undefined}

Tocca.js caught the event in the tap event listener. As it turns out the problematic behavior can be resolved by including Tocca.js in your page and adding the tap event to any event listener that is listening for a click. To be safe I added the other two Tocca.js "tap-like" events as well:

$('.log-in').on('click tap dbltap longtap', function(e) { console.log("HAIL SATAN!"); })

While I am satisfied with using Tocca.js and have no reason to dig further, it would be fairly trivial to determine the original emitted event by inserting some debug statements into Tocca.js.

So now you know, and knowing is half the battle.

Answer 3

I will jump to an empty pool here and do a wild guess as you did not provide any piece of code, check that those links don't have pointer-events: none; set in the css. That will prevent any click handler from being executed.

Answer 4

I'm betting the element hasn't been loaded on the dom at the time you're requiring it. So your code is basically $(undefined).on("click", fun) or something like that. Try writing an if condition that checks if the element itself is loaded at the time you're defining the condition and see what you come up with. Maybe console.log the element to make sure you have it before you define the listener?

Answer 5

I'm not sure if this answer applies to the original (very old) question, but in my case, mousedown and mouseup events both fired but no click.

The problem ended up being that the target element was being redrawn/recreated from the mousedown event handler. Most of the time, chrome would still do the click, except for one very specific situation.

After preventing that redraw, click started firing reliably again.

If I ended up here hopefully that'll help someone else that does.