Click events do not work in Chrome, but the event fires when we fire it manually from the console

Question

Out of the hours, I try to find the root cause for one of the difficult problems with clients. Help is appreciated.

None of the click events in the Chrome client browser fire.

But when we call the JavaScript method from the console, it starts!

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

I tried to remove the "data binding" attribute and added a simple "onClick", it still does not work. none of the buttons on the website work :(

Here is the 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 start.

In IE and FireFox all buttons work as expected, the problem is only on chrome

Decision

The laptop was based on a touch screen.

1. Enter below in your Chrome browser:

chrome: // flags / # touch events

2. In the "Enable Touch Events" section, select "Disable" from the drop-down list.

3. Click "Restart Now"

Answer 1

Answer

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

So the solution turns off the touch screen

1. Enter below in your Chrome browser:

chrome: // flags / # touch events

2. In the "Enable Touch Events" section, select "Disable" from the drop-down list.

3. Click "Restart Now"

Answer 2

I understand that this is an old post, but since the described problem still exists, I will provide my solution:

I do not have a laptop with a touch screen, so I myself did not experience a problem - but I had to repeat it if I decided to solve it. So, I went into chrome://flags/#touch-events and set Enable touch events to Enabled .

I rebooted Chrome, opened the developer console and pressed ⌘ + ⇧ + M to open the device mode window (it seems that this last part is not absolutely necessary).

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

In researching the problem, I came across a library - Tocca.js . Its description reads:

Super lightweight script (1kb) for detection through Javascript events like 'tap' 'dbltap' 'swipeup' 'swipedown' 'swipeleft' 'swiperight' on any device.

To find out which event, if any, is triggered, I bound all the event handlers that Tocca.js provides to the element that detects 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 pressed 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 an event in a tap event listener. As it turned out, problematic behavior can be resolved by including Tocca.js in your page and adding a tap event to any event listener that listens for click . To be safe, I added two other Tocca.js "tap-like" events:

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

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

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

Answer 3

I will go to the empty pool here and make a wild guess, since you did not provide any piece of code, make sure that these links do not have pointer-events: none; installed in css. This will prevent any click handler from executing.

Answer 4

I am sure that the item was not loaded on dom at the time you required it. So your code is basically $(undefined).on("click", fun) or something like that. Try writing an if condition that checks to see if this element is loaded during condition definition, and see what you come up with. Maybe a console.log element to make sure you have this before defining a listener?