javascript - 使整个DIV块可点击

我的网站上有一个脚本，使用jQuery可以使variation-value div元素可单击。

不幸的是，带有p和div标记的区域不可单击。有一个简单的解决办法吗？

jsfiddle示例::: http://jsfiddle.net/xb4qkdLu/ :::

<div class="variation-value">
    <p class="left" style="background:green">left aligned text</p>
    <div class="right" style="background:red">right aligned text</div>
    <p></p>
</div>

最佳答案

我在随后发布的jsfiddle中看到的是，您将单击绑定到了td类（variation）中的$('.variation').on('click', 'td', function(event){...元素。

根据您写的内容以及我在原始帖子下留下的评论，将单击触发侦听器挂接到.variation-value'类将为您解决此问题（因为您目前尚无与之相关的事件）。

如果您想补充原始脚本，则可以通过在td中的p和span的css中添加以下pointer-events:none;来解决CSS“ hack”问题（这将需要一些额外的操作） IE微调），或者您也可以将td中的其他元素添加到触发器侦听器。

代码示例：

CSS就像（考虑正常情况的浏览器）：

.variation-value > p, .variation-value > div { pointer-events:none; }

jQuery将是：

$('.variation-value').on('click', function(event){ ... }

请记住，如果left元素可见，则它必定会重置值列表（尚未找到right元素的任何触发器集）。如果为.variation-values中的所有元素启用点击效果，则将丢失绑定到左侧元素的重置效果。这肯定是您想要实现的目标吗？如果是这样的话，就不用上面的CSS代码片段，您就可以拥有所有功能。

还要注意，在HTML标记中，您将元素放在以下层次结构中：

div.variation-value
    p[left]
        div[right]

在为正确的元素添加p之前，您不会关闭div元素，因为它是p的子元素。我假设您应该关闭p标记以确保功能正常。