Question

我正在处理这个运行数据属性的插件。基本上，当您单击正文上的任何位置时，它将确定单击目标是否具有此特定数据-vzpop。问题是我可以说我有一个div而div内部是一个href。它只承认a href为点击目标而不是div（这是有意义的）。

在某些情况下我想尝试做的是将数据属性放在包含div上，使得div中的任何内容都可以点击。

以下是jsfiddle的问题示例，它需要查看控制台，以便您可以实际查看哪个元素已注册为被点击。

<div data-vzpop>
    <a href="#">Click Me</a>
</div>

$('body').on('click', function(evt){
    var clickTarget = evt.target;
    if ($(clickTarget).attr('data-vzpop') !== undefined){
        evt.preventDefault();           
        console.log('called correctly')
    }  else {
        console.log('not called correctly')
    }
    console.log(clickTarget)
});

fiddle

Answer 1

您将使用事件委派：

$('body').on('click', '[data-vzpop]', function(evt) {

仅当evt.target的数据属性为data-vzpop时才会触发此操作，无论该值是什么。

如果您希望[data-vzpop]内的项目也能触发它，您可以使用原始点击事件，但请检查$(clickTarget).closest('[data-vzpop]').length > 0以确定它是否是嵌套目标。

$('body').on('click', function(evt){
    var clickTarget = evt.target;
    if ($(clickTarget).attr('data-vzpop') != null ||
        $(clickTarget).closest('[data-vzpop]').length > 0){
        evt.preventDefault();           
        console.log('called correctly')
    }  else {
        console.log('not called correctly')
    }
    console.log(clickTarget)
});

用clicktarget优雅地冒泡

1 个答案: