javascript 单击事件在 Chrome 中不起作用，但是当我们从控制台手动执行它时会触发事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33107790/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Click events are not working in Chrome, but event fires when we execute it manually from console
提问by kudlatiger
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
铬：//标志/#touch-events
2.In the enable touch events section ,please select "Disable" from the drop down.
2.在启用触摸事件部分，请从下拉列表中选择“禁用”。
3.Click on "Relaunch Now"
3.点击“立即重启”
采纳答案by kudlatiger
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
铬：//标志/#touch-events
2.In the enable touch events section ,please select "Disable" from the drop down.
2.在启用触摸事件部分，请从下拉列表中选择“禁用”。
3.Click on "Relaunch Now"
3.点击“立即重启”
回答by Mike Furlender
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-eventsand set Enable touch eventsto Enabled.
我没有触摸屏笔记本电脑，所以我自己没有遇到这个问题 - 但如果我要解决它，我需要复制它。所以，我进入chrome://flags/#touch-events并设置Enable touch events为Enabled。
I reloaded Chrome, opened the developer console and pressed ?+?+Mto 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 clickevents never fire.
现在我能够复制这个问题 -click事件的监听器永远不会触发。
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' 'swipedown' 'swipeleft' 'swiperight'。
To see what event, if any, doesfire, 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 tapevent listener. As it turns out the problematic behavior can be resolved by including Tocca.js in your page and adding the tapevent 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事件添加到任何侦听click. 为安全起见，我还添加了另外两个 Tocca.js “类似点击”的事件：
$('.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.
所以现在你知道了，知道是成功的一半。
回答by taxicala
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.
我将在这里跳到一个空池并进行疯狂猜测，因为您没有提供任何代码，请检查这些链接是否没有pointer-events: none;在 css 中设置。这将阻止执行任何点击处理程序。
回答by OceansOnPluto
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.logthe element to make sure you have it before you define the listener?
我敢打赌该元素在您需要它时尚未加载到 dom 上。所以你的代码基本上$(undefined).on("click", fun)是这样的。尝试编写一个 if 条件来检查元素本身是否在您定义条件时加载并查看您想出的结果。也许console.log是在定义侦听器之前确保您拥有它的元素？
