javascript - 使整个 DIV block 可点击

Question

我的网站上有一个脚本，它使用 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>

Answer 1

我在您之后发布的 jsfiddle 中看到的是，您将点击绑定(bind)到 variation 类中的 td 元素 ($( '.variation').on('click', 'td', function(event){...).

根据您写的内容以及我在您的原始帖子下留下的评论，将点击触发器监听器连接到 .variation-value' 类将为您解决这个问题(因为您目前没有与之相关的事件)。

如果您想补充原始脚本，您要么必须通过添加到 p 和 span 的 css 来解决一些 CSS“hack”在 td 中添加以下 pointer-events:none;(需要对 IE 进行一些额外的微调)，或者您也可以将 td 中的其他元素添加到触发器中听众。

代码示例:

CSS 会像(考虑正常情况下的浏览器):

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

Jquery 将是:

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

请记住，如果您的 left 元素可见(尚未找到为 right 元素设置的任何触发器)，则它必然会重置您的值列表。如果您为 .variation-values 中的所有元素启用点击效果，您将失去绑定(bind)到左侧元素的重置效果。这肯定是您想要实现的目标吗？如果是这样，只需去掉上面的 CSS 代码片段，您就可以按照自己的意愿使用所有功能。

另外请注意，在您的 HTML 标记中，您将元素置于以下层次结构中:

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

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