点击事件在Chrome中不起作用，但是当我们从控制台手动执行事件时会触发事件

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.

客户端Chrome浏览器中的所有点击事件均未触发。

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

但是当我们从控制台调用JavaScript方法时它会触发!

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 :(

尝试删除“数据绑定”属性并添加简单的“onClick”,仍然无法正常工作。没有在网站上工作的按钮:(

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

在IE和FireFox中,所有按钮都按预期工作,问题仅在于chrome

Solution

Laptop was touch screen based!!

笔记本电脑是基于触摸屏!!

1.Type below in chrome browser :

1.在Chrome浏览器中输入以下内容:

chrome://flags/#touch-events

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

2.在启用触摸事件部分,请从下拉列表中选择“禁用”。

3.Click on "Relaunch Now"

3.点击“立即重启”

4 个解决方案

#1

Answer

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

由于用户笔记本电脑是“HP Elitebook 840”,因此启用了触摸屏。

So solution was disabling the touch screen

所以解决方案是禁用触摸屏

1.Type below in chrome browser :

1.在Chrome浏览器中输入以下内容:

chrome://flags/#touch-events

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

2.在启用触摸事件部分,请从下拉列表中选择“禁用”。

3.Click on "Relaunch Now"

3.点击“立即重启”

#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.

我没有触摸屏笔记本电脑,所以我自己没有遇到这个问题 - 但如果我要解决它,我需要复制它。所以,我进入了chrome:// flags / #touch-events并将启用触摸事件设置为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).

我重新加载了Chrome,打开了开发人员控制台,然后按⌘+⇧+ M打开“设备模式”窗口(似乎最后一部分并非绝对必要)。

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:

在研究这个问题时,我偶然发现了图书馆--Tocca.js。其描述如下:

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

超轻量级脚本(1kb)通过Javascript事件检测,如'tap''dbltap''swipeup''swipeown''swipeleft''swiperight'在任何设备上。

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:

为了查看触发了什么事件(如果有的话),我将Tocca.js提供的所有事件处理程序附加到显示有问题行为的元素:

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:

Tocca.js在tap事件监听器中捕获了该事件。事实证明,通过在页面中包含Tocca.js并将tap事件添加到正在侦听单击的任何事件侦听器,可以解决有问题的行为。为了安全起见,我还添加了另外两个Tocca.js“tap-like”事件:

$('.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.

虽然我对使用Tocca.js感到满意并且没有理由进一步挖掘,但通过将一些调试语句插入Tocca.js来确定原始发出的事件是相当简单的。

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

所以现在你知道,知道是成功的一半。

#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.

我将在这里跳到一个空池并做一个疯狂的猜测,因为你没有提供任何代码,检查那些链接没有指针事件:无;在css中设置。这将阻止执行任何单击处理程序。

#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?

我敢打赌,当你需要它时,元素还没有加载到dom上。所以你的代码基本上是$(undefined).on(“click”,fun)或类似的东西。尝试编写一个if条件,检查在定义条件时元素本身是否已加载,并查看您的结果。在定义监听器之前,可能是console.log元素以确保你拥有它?