Newman's Personal Motorcade

    proxyclickevent

    0.0.1 • Public • Published

    ProxyClickEvent

    • 事件代理的情况下,支持阻止事件冒泡
    • demo

    协议

    BSD 3-Clause License

    安装

     npm i proxyclickevent

    使用方式

    script标签引入

      <div class="a" clickFn="fna">
            <div class="b" clickFn="fnb">
                <div class="e" clickFn="fne">点击<b>捣蛋鬼E</b>,会执行
                    <B>e,b,a</B>函数
                </div>
                <div class="c" clickFn="fnc">点击<b>捣蛋鬼C,stop</b>,执行执行<b>c</b>函数</div>
                <div class="f" clickFn="fnf">点击<b>捣蛋鬼F</b>,会执行<b>f,b,a</b>函数</div>
            </div>
        </div>
    <script src="yourPath/ProxyClickEvent.js"></script>
     
      var funs = {
          fna: function() {
              console.log("点击a")
          },
          fnb: function() {
              console.log("点击b")
          },
          fnc: function(e) {
            //阻止事件冒泡
              e.__stop = true;
              console.log("点击c")
          },
          fnd: function() {
              console.log("点击d")
          },
          fne: function() {
              console.log("点击e")
          },
          fnf: function() {
              console.log("点击f")
          }
      }
    let proxyEvent = new window.ProxyClickEvent();
    //如果出现父子标签关系有变化时候,必须clear后重新扫描dom,重新add
     proxyEvent.clear();
    let clickDoms = document.querySelectorAll("[clickFn]");
    for (let i = 0; i < clickDoms.length; i++) {
        let dom = clickDoms[i];
        let fnStr = clickDoms[i].getAttribute("clickFn");
        proxyEvent.add(dom, funs[fnStr])
    }

    es6的方式

    import ProxyClickEvent from "proxyclickevent"

    方法

    name desc
    new ProxyClickEvent 接受一个代理点击的dom对象,如果不填写默认是document.body
    add 接受2个参数,一个是dom,一个是对应的函数,目前不支持同一个dom被add多次,如果重复直接警告,拒绝本次add
    remove 接受2个参数,一个是dom,一个是对应的函数
    clear 清空内部数组
    destroy 销毁document的点击事件,已经数组和检测dom是否存在的定时器,组件销毁前一定要执行它

    提示

    • 如果出现父子标签增减的时候,一定要先clear后,再遍历dom,将点击事件重新add到数组
    • 否则无法保证“冒泡的顺序”

    阻止冒泡

    • 给回调函数的第一个参数添加属性__stop并赋值为true即可

    Install

    npm i proxyclickevent

    DownloadsWeekly Downloads

    0

    Version

    0.0.1

    License

    BSD-3-Clause

    Unpacked Size

    7.95 kB

    Total Files

    5

    Last publish

    Collaborators

    • lucy2