Dcloud H5+开发 mui-checkbox tableview listview子标签与父标签点击事件

【本文出处: http://blog.csdn.net/leytton/article/details/53843344】

a标签里面嵌套一个a标签，点击子链接标签时，同时触发了父标签a。这样的场景有很多，例如下面代码：

参考：https://segmentfault.com/q/1010000004533969

<a href="baidu.com">
    <div>
        <div class="title">百度</div>
        <div class="content">百度是全球最大的中文搜索引擎...
            <span onclick="location.href='readmore.html'" href="X.html" target="_blank">Read More</span>
        </div>
    </div>
</a>

如果我们想点击子标签而不触发父标签事件怎么办呢？

< a href = "baidu.com" > <div > <div class = "title" > 百度 < /div>
                <div class="content">百度是全球最大的中文搜索引擎...
                    <span href="X.html" target="_blank" id="readmore">Read More</span > </div>
            </div > </a>
        <script>
            document.getElementById("readmore").addEventListener("click",function(e){
                 e.stopPropagation();
                 //不能return false;因为 return false 表示两个动作
                 // e.stopPropagation();
                 //e.preventDefault();  这个会让点了 a 不跳转
                 //接下来使用js代码进行页面跳转
});
</script>

同理 在listview/tableview中的button事件与父标签点击事件也可以这样实现避免冲突

mui-checkbox也是如此

此外防止mui-checkbox点击label导致触发两次checkbox的change事件，屏蔽input点击事件

.mui-checkbox>input {
				pointer-events: none;
			}