Question

在升级到woocommerce 3.0后，我的wordpress网站会发生这种情况。

HTML是：

<ol class="flex-control-nav flex-control-thumbs">
    <li><img src="<source>" class="flex-active" draggable="false"></li>
    <li><img src="<source>" draggable="false"></li>
    <li><img src="<source>" draggable="false"></li>
</ol>

在chrome dev工具中，当我检查ol元素时，我看到它有一个注册的点击事件处理程序，但是当我点击其中一个图像时没有任何反应。尝试在回调开始时添加一个断点，并没有就此止步。

这种情况发生在IE，Firefox和Chrome中，所以代码中的某些东西肯定是坏的。

java脚本代码来自http://flexslider.woothemes.com/thumbnail-controlnav.html

澄清一点，这里的问题是，当我点击导航栏图像时，点击事件什么都不做，图像不会改变。

我进一步调试了它并发现了这一点：事件似乎正在触发，但是jquery没有触发回调。点击其中一个导航图像，click事件的路径数组参数在li元素处完成，而不是img。这是有问题的，因为在jquery代码（https://github.com/jquery/jquery/blob/master/src/event.js:394）的下方，当前元素（li，路径中的最后一个元素）作为种子传递给find函数，该函数自选择器以来没有找到任何内容用于注册事件（在jquery .delegate（）中）是＆＃34; a，img＆＃34;所以返回为空并且不调用事件的回调。

所以，我想现在的问题是为什么当我点击img时，li元素＆＃34;捕获＆＃34;事件而不是img？

由于

Answer 1

我发现了这个问题，我的img元素有一个css属性：＆＃34; pointer-events：none;＆＃34;

删除它解决了这个问题。

进一步阅读：https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

虽然已注册

1 个答案: