on绑定阻止冒泡失败

使用zepto库，有如下dom

<div id="J_parent">
        <a href="#">
            <span>点我有惊喜</span>
        </a>
</div>    

以上div内的节点是后续生成的，通过on绑定事件：

$('#J_parent').on('tap',  'span', function(e){
    e.preventDefault();
    e.stopPropagation();
    console.log('span');
});

$('#J_parent').on('tap',  'a', function(e){
    console.log('a');
});

此时点击span区域，控制台会打出:

'span'

'a'

阻止冒泡失败，此时可以通过在a的绑定事件里判断e.target,如下：

$('#J_parent').on('tap',  'a', function(e){
    if(e.target.nodeName == 'SPAN'){
        return;
    }
    console.log('a');
});

这样点击span区域，控制台会打出:

'span'

 

ps:

移动网页中click较tap有延迟；

target与currentTarget的区别，如以上a的绑定事件代码中，如果点击span区域，此时e.target为span，而e.currentTarget为a。更专业的说明：

target在事件流的目标阶段；currentTarget在事件流的捕获，目标及冒泡阶段。只有当事件流处在目标阶段的时候，两个的指向才是一样的， 而当处于捕获和冒泡阶段的时候，target指向被单击的对象而currentTarget指向当前事件活动的对象（一般为父级）。