本篇文章及后续主要总结一些在实际应用中常见的基础用法。

主要内容:阻止事件向下、阻止默认行为、阻止事件冒泡

一、阻止事件向下:event.stopPropagation()

  • Echarts的示例
  • 字如其名,停止事件的传播,阻止它被分派到其他 Document 节点
  • 常见应用:下拉菜单、退出登录、一些选项
  • HTML:

    1
    2
    3
    <div class="btn">点击</div>
    <div class="box"></div>
    <button class="look">点击看看</button>
  • JS:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    $('.btn').on('click',(e)=>{
    $('.box').fadeIn().click(()=>{
    // do something
    })
    $(document).on('click',()=>{
    $('.box').fadeOut()
    })
    e.stopPropagation();
    })
    $('.look').click(()=>{
    alert('ok')
    })


  • 二、阻止默认事件:return false

  • 此处使用form表单的submit默认提交
  • HTML:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <style>
    form{display: flex;}
    .value{flex: 0 0 65px;}
    #sub{flex: 0 0 35px;}
    </style>
    <form action="https://www.baidu.com">
    <input type="text" class="value">
    <input type="submit" value="提交" id="sub">
    </form>
  • 强烈说明:千万不要在action里面写提交地址,否则你可能被骂得狗血淋头,这里仅做演示而已

  • JS:
    1
    2
    3
    4
    5
    6
    7
    8
    $('#sub').click(()=>{
    if($('.value').val().length>0){
    $('form').submit() // submit()方法
    }
    else{
    return false
    }
    })


三、阻止事件冒泡

不明所以请点击这里

  • 两种方法阻止:return falseevent.stopPropagation()
  • HTML:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="three1">
    最外框
    <div class="three2">
    中间框
    <div class="three3">
    最小框
    </div>
    </div>
    </div>
  • JS:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    $('.three1').click(()=>{
    console.log('最大框')
    })
    $('.three2').click((e)=>{
    console.log('中间框')
    e.stopPropagation() //方法一
    })
    $('.three3').click(()=>{
    console.log('最小框')
    return false // 放法二
    })