如何用jQuery实现移动端仅触发a标签文本点击事件，排除SVG？

需求很明确：移动端里，<a>标签里既有文本又有SVG，现在点文本和SVG都会触发绑定的点击事件，要改成只有点文本才触发，点SVG不触发。

先贴一下你给的原始代码：

<li class="has-child">
    <a href="https://example.com">Example<svg>+</svg></a>
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
</li>

$( 'li.has-child a' ).on('click', function(e) {
    alert('...');
});

两种可行的解决办法 #

方法一：在a标签的点击事件里过滤触发源

直接在回调里判断，要是点击的是SVG或者SVG的子元素，就直接终止事件执行：

$( 'li.has-child a' ).on('click', function(e) {
    // 检查点击目标是不是SVG，或者目标的父级是SVG
    if ($(e.target).is('svg') || $(e.target).closest('svg').length) {
        return false;
    }
    alert('...');
});

方法二：给SVG绑定事件阻止冒泡

给SVG单独加个点击事件，阻止它的事件冒泡到父级a标签，这样a标签的事件就不会被触发了，而且SVG还能单独加自己的逻辑：

// 先处理SVG的点击，阻止冒泡
$( 'li.has-child a svg' ).on('click', function(e) {
    e.stopPropagation();
    // 要是SVG需要自己的点击行为，写在这里就行
});

// 原来的a标签点击事件保留
$( 'li.has-child a' ).on('click', function(e) {
    alert('...');
});

内容的提问来源于stack exchange，提问作者user8463989