我的事件指令


阅读数:   

Angularjs

页面加载完成触发

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
webDirectives.directive('ngFinishRender', ['$interval', function ($interval) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            // <div on-finish-render ng-bind="'finished'"></div>
            // 放到需要angular加载完成后才能出现的位置
            // 可以通过回调函数或者事件监听触发
            elem[0].style.display = 'none';
            var timer = $interval(function () {
                if (elem[0].innerText) {
                    scope.$emit('ngFinishRender'); //事件通知
                    var fun = scope.$eval(attrs.onFinishRender);
                    if (fun && typeof(fun) == 'function') {
                        fun(); //回调函数
                    }

                    $interval.cancel(timer);
                }
            }, 100);

        }
    };
}]);

加载完成事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
webDirectives.directive('ngLoad', function ($window) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            elem.bind('load', function () {
                //scope.$apply(attrs.ngLoad);
                var fun = scope.$eval(attrs.ngLoad);
                if (fun && typeof(fun) == 'function') {
                    fun();
                }
            });
        }
    };
});

移动端触摸事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
webDirectives.directive("ngTouchstart", function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            elem.bind("touchstart", function(){
                // scope.$apply(attrs.ngTouchstart);
                let fun = scope.$eval(attrs.ngTouchstart);
                if (fun && typeof(fun) === 'function') {
                    fun();
                }
            });
        }
    }
});

webDirectives.directive("ngTouchmove", function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            elem.bind("touchmove", function(){
                // scope.$apply(attrs.ngTouchmove);
                let fun = scope.$eval(attrs.ngTouchmove);
                if (fun && typeof(fun) === 'function') {
                    fun();
                }
            });
        }
    }
});


webDirectives.directive("ngTouchend", function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            elem.bind("touchend", function(){
                // scope.$apply(attrs.ngTouchend);
                let fun = scope.$eval(attrs.ngTouchend);
                if (fun && typeof(fun) === 'function') {
                    fun();
                }
            });
        }
    }
});

鼠标滚轮事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
webDirectives.directive('ngMouseWheelUp', function () {
    return function (scope, element, attrs) {
        element.bind("DOMMouseScroll mousewheel onmousewheel", function (event) {

            // cross-browser wheel delta
            var event = window.event || event; // old IE support
            var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));

            if (delta > 0) {
                scope.$apply(function () {
                    scope.$eval(attrs.ngMouseWheelUp);
                });

                // for IE
                event.returnValue = false;
                // for Chrome and Firefox
                if (event.preventDefault) {
                    event.preventDefault();
                }
                // 临时解决方案，阻止点突变数据库svg图片的滚动
                return false;
            }
        });
    };
});

webDirectives.directive('ngMouseWheelDown', function () {
    return function (scope, element, attrs) {
        element.bind("DOMMouseScroll mousewheel onmousewheel", function (event) {

            // cross-browser wheel delta
            var event = window.event || event; // old IE support
            var delta = Math.max(-1, Math.min(1, (event.wheelDelta || -event.detail)));

            if (delta < 0) {
                scope.$apply(function () {
                    scope.$eval(attrs.ngMouseWheelDown);
                });

                // for IE
                event.returnValue = false;
                // for Chrome and Firefox
                if (event.preventDefault) {
                    event.preventDefault();
                }
                // 临时解决方案，阻止点突变数据库svg图片的滚动
                return false;
            }
        });
    };
});

回车事件

1
2
3
4
5
6
7
8
9
10
11
12
webDirectives.directive('ngEnter', function() {
　　return function(scope, element, attrs) {
　　　　element.bind("keydown keypress", function(event) {
　　　　　　if([0, 1, 13, 100].indexOf(event.which) > -1) {
　　　　　　　　scope.$apply(function(){
　　　　　　　　　　scope.$eval(attrs.ngEnter);
　　　　　　　　});
　　　　　　　　event.preventDefault();
　　　　　　}
　　　　});
　　};
});

点击事件防抖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
webDirectives.directive('debounceClick', ['$parse', function($parse) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        const delay = Number(attrs.debounceDelay) || 1500
        const fn = $parse(attrs.debounceClick)

        const debounce = function (fn, delay, options = {}) {
          let timer = null
          return function() {
            // 指定在延迟开始前调用
            if (options.leading) {
              timer ? clearTimeout(timer) : fn.apply(this, arguments)
              timer = setTimeout(_ => {
                timer = null
              }, delay)
            } else {
              timer && clearTimeout(timer)
              timer = setTimeout(_ => {
                timer = null
                fn.apply(this, arguments)
              }, delay)
            }
          }
        }

        element.on('click', debounce(function(ev) {
          console.log('click')
          scope.$apply(function() {
            fn(scope, {
              $event: ev
            })
          })
        }, delay, {leading: true}))
      }
    }
  }])

编译HMTL字符串

解决 ng-bind-html 不能编译绑定事件问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
webDirectives.directive('compileHtml', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, ele, attrs) {
            // 取出scope的变量进行监听，这里可能会有过滤器，故需要删除过滤器（目前没有更多情况，就不拓展了）
            // TODO: 监听 scope.$eval(attrs.compileHtml) 会报错: 10 $digest() iterations reached
            const name = attrs.compileHtml.split('|')[0].trim()
            if (!name) return

            scope.$watch(name, function () {
                const html = scope.$eval(attrs.compileHtml)
                ele.html(html)
                $compile(ele.contents())(scope)
            })
        }
    }
}])

// <div compile-html="message | trustedHtml"></div>
// $scope.message = `<div class="message-tips" ng-click="alert('11111111')">这是一个提示</div>`

滚动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
webDirectives.directive('ngScroll', ['$parse', function($parse) {
    return {
        restrict: 'AC',
        link: function(scope, element, attrs) {
            const interval = Number(attrs.scrollEventInterval) || 50
            const fn = $parse(attrs.ngScroll)

            element.on('scroll', throttle(function(ev) {
                scope.$apply(function() {
                    fn(scope, { $event: ev })
                })
            }, interval))
        }
    }
}])
// <div ng-scroll="handleScroll($event)"></div>

Vue

延迟触发点击事件

函数柯里化传参写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
Vue.directive('debounce', {
  bind (el, binding, vnode, oldVnode) {
    const self = vnode.context
    let options = self.hasOwnProperty(binding.arg) ? self[binding.arg] : binding.arg
    options = typeof options === 'object' ? options : { wait: parseInt(options) || 0 }
    options = Object.assign({
      wait: 0,
      debounceOptions: undefined,
      useCapture: false
    }, options)
    const modifiers = binding.modifiers || {}
    const debounce = function (fn, delay, options = {}) {
        let timer = null
        return function() {
            // 指定在延迟开始前调用
            if (options.leading) {
                timer ? clearTimeout(timer) : fn.apply(this, arguments)
                timer = setTimeout(_ => {
                    timer = null
                }, delay)
            } else {
                timer && clearTimeout(timer)
                timer = setTimeout(_ => {
                    timer = null
                    fn.apply(this, arguments)
                }, delay)
            }
        }
    }
    Object.keys(modifiers).forEach(key => {
      el.addEventListener(key, debounce(function(evt) {
        binding.value(evt)
      }, options.wait, options.debounceOptions),
      options.useCapture)
    })
  }
})

// <div v-debounce:500.click="evt => toNextRouter(evt, 'Contacts')">点我跳转联系人页面</div>
// <div v-debounce:500.click="toNextRouter">点我跳转联系人页面</div>

通过解析expression来完成传参（存在问题，会导致组件的nextTick报错，只能放弃，原因未知）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// v-debounce:配置项.事件名="函数"，如v-debounce.click:500="fn($event, arg1, arg2)"
Vue.directive('debounce', {
  bind (el, binding, vnode, oldVnode) {
    const self = vnode.context
    const options = Object.assign({
      wait: 0,
      debounceOptions: undefined,
      useCapture: false
    }, typeof binding.arg === 'object' ? binding.arg : { wait: parseInt(binding.arg) || 0 })
    const modifiers = binding.modifiers || {}
    const matchRes = binding.expression.match(/^\s*([\w\W]+?)(\(([^)]*)\))?\s*$/)
    if (!matchRes) throw Error('"v-debounce" directive expression is invalid!')

    const fun = matchRes[1].trim()
    const args = matchRes[3] ? matchRes[3].trim().split(/\s*,\s*/) : []
    const debounce = function (fn, delay, options = {}) {
        let timer = null
        return function() {
            // 指定在延迟开始前调用
            if (options.leading) {
                timer ? clearTimeout(timer) : fn.apply(this, arguments)
                timer = setTimeout(_ => {
                    timer = null
                }, delay)
            } else {
                timer && clearTimeout(timer)
                timer = setTimeout(_ => {
                    timer = null
                    fn.apply(this, arguments)
                }, delay)
            }
        }
    }

    Object.keys(modifiers).forEach(key => {
      el.addEventListener(key, debounce(function(evt) {
        const argValues = args.map(item => (item === '$event' ? evt : self[item]))
        self[fun].apply(self, argValues)
      }, options.wait, options.debounceOptions), options.useCapture)
    })
  }
})

// <div v-debounce:500.click="toNextRouter($event, 'Contacts')">点我跳转联系人页面</div>
// <div v-debounce:500.click="toNextRouter">点我跳转联系人页面</div>

通过binging.value可以读取到当前变量的方式传参（该写法很怪，放弃）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// v-defer-click: 延迟点击
Vue.directive('defer-click', {
  bind (el, binding, vnode, oldVnode) {
    const self = vnode.context
    const delay = vnode.data.attrs ? parseInt(vnode.data.attrs['data-delay']) : 0
    const fun = binding.arg // 延迟触发的函数名
    if (!fun || typeof self[fun] !== 'function') return

    el.onclick = function (evt) {
      setTimeout(() => self[fun](binding.value), delay)
    }
  }
})

// <div v-defer-click:toNextRouter="'Contacts'">点我跳转联系人页面</div>

输入框字数限制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// v-word-limit: 限制字数长度
Vue.directive('word-limit', {
  bind: function(el, binding) {
  },
  inserted: function(el, binding) {
    const canEdit = !!~['', 'true'].indexOf(el.getAttribute('contenteditable'))
    const isField = !!~['input', 'textarea'].indexOf(el.tagName.toLowerCase())
    if (!isField && !canEdit) return

    const tipDOM = document.createElement('span')
    tipDOM.className = 'number-of-words'
    tipDOM.style = 'position: absolute; right: 5px; font-size: 12px; color: #888; bottom: 5px'
    tipDOM.innerText = el.value.length + '/' + binding.value
    const maxLength = parseInt(binding.value)
    const parentDOM = el.parentNode
    parentDOM.style.position = 'relative'
    parentDOM.appendChild(tipDOM)
    el.style.width = '100%'
    el.addEventListener('keyup', function() {
      if (el.value.length > maxLength) return (el.value = el.value.slice(0, maxLength))
      tipDOM.innerText = el.value.length + '/' + binding.value
    })
  },
  unbind: function(el, binding) {
    // keyup绑定在el上，指令卸载的时候el也卸载了，不需要取消监听keyup事件
  },
})

// <textarea placeholder="字数长度不能超过500" v-word-limit="500"></textarea>

增添各种手势事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import EventUtil from './touch-utils'

// 移动端手势事件
// v-touch.事件名="evt => 函数(函数参数)"，如v-touch.longpress="evt => fn(evt, arg1, arg2)"
Vue.directive('touch', {
  bind: function (el, binding) {
    const modifiers = binding.modifiers || {}
    Object.keys(modifiers).forEach(key => {
      if (!~EventUtil.events.indexOf(key)) {
        console.warn(`v-touch is not support [${key}] modifiers!`)
        return
      }

      EventUtil.bindEvent(el, key, binding.value)
    })
  }
})

touch-utils.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

export default (function () {
  // 支持事件列表
  const eventArr = ['swipeleft', 'swiperight', 'slideup', 'slidedown', 'click', 'longpress']
  // 自定义事件的前缀标识
  const prefix = 'event_'

  // touchstart事件，delta记录开始触摸位置
  function touchStart (event) {
    this.delta = {}
    this.delta.startX = event.touches[0].pageX
    this.delta.startY = event.touches[0].pageY
    this.delta.startTime = new Date().getTime()
  }

  /**
   * touchmove事件，手势滑动情况处理
   * 1、如果位移量很小或没有位移，可能是点击事件交由touchEnd处理
   * 2、如果位移量较大，x大于y，可以看做平移，x>0,向右滑，反之向左滑。
   * 3、如果位移量较大，x小于y，看做上下移动，y>0,向下滑，反之向上滑
   * */
  function touchMove (event) {
    const delta = this.delta
    delta.x = delta.startX - event.changedTouches[0].pageX
    delta.y = delta.startY - event.changedTouches[0].pageY

    event.delta = delta
    if (Math.abs(delta.x) < 5 && Math.abs(delta.y) < 5) { // 移动距离小于5认为是点击
      // Pass
    } else if (Math.abs(delta.x) > Math.abs(delta.y)) {
      if (delta.x > 0) {
        this[prefix + 'swipeleft'] && this[prefix + 'swipeleft'].forEach(function (fn) {
          event.ctype = 'swipeleft'
          fn(event)
        })
      } else if (delta.x < 0) {
        this[prefix + 'swiperight'] && this[prefix + 'swiperight'].forEach(function (fn) {
          event.ctype = 'swiperight'
          fn(event)
        })
      }
    } else {
      if (delta.y > 0) {
        this[prefix + 'slidedown'] && this[prefix + 'slidedown'].forEach(function (fn) {
          event.ctype = 'slidedown'
          fn(event)
        })
      } else if (delta.y < 0) {
        this[prefix + 'slideup'] && this[prefix + 'slideup'].forEach(function (fn) {
          event.ctype = 'slideup'
          fn(event)
        })
      }
    }
  }

  // touchend事件，非手势滑动情况处理
  function touchEnd (event) {
    const delta = this.delta
    delta.endX = delta.startX - event.changedTouches[0].pageX
    delta.endY = delta.startY - event.changedTouches[0].pageY
    this.delta.endTime = new Date().getTime()
    const timegap = this.delta.startTime - this.delta.endTime

    event.delta = delta
    if (Math.abs(delta.endX) < 5 && Math.abs(delta.endY) < 5) { // 移动距离小于5认为是点击
      if (timegap < 1000) {
        this[prefix + 'click'] && this[prefix + 'click'].forEach(function (fn) {
          event.ctype = 'click'
          fn(event)
        })
      } else {
        this[prefix + 'longpress'] && this[prefix + 'longpress'].forEach(function (fn) {
          event.ctype = 'longpress'
          fn(event)
        })
      }
    }
  }

  // 节流
  function throttle(fun, time) {
    let timer = null
    return function() {
      if (!timer) {
        timer = setTimeout(() => {
          fun.apply(this, arguments)
          timer = null
        }, time)
      }
    }
  }
  const throttleTouchMove = throttle(touchMove, 300)

  function bindEvent (dom, type, callback) {
    if (!dom || !/HTML(.+)Element/.test(Object.prototype.toString.call(dom))) return console.error('dom is not support!')
    if (!~eventArr.indexOf(type)) return console.error('type is not support!')

    type = prefix + type
    dom[type] = dom[type] || []
    dom[type].push(callback)

    dom.addEventListener('touchstart', touchStart)
    dom.addEventListener('touchmove', throttleTouchMove)
    dom.addEventListener('touchend', touchEnd)
  }

  function removeEvent (dom, type, callback) {
    if (!dom['event' + type]) return console.error('type is not exist!')

    type = prefix + type
    const index = dom[type].indexOf(callback)
    index > -1 && dom[type].splice(index, 1)

    if (dom[type].length === 0) {
      delete dom[type]
      dom.removeEventListener('touchstart', touchStart)
      dom.removeEventListener('touchmove', throttleTouchMove)
      dom.removeEventListener('touchend', touchEnd)
    }
  }
  return {
    events: eventArr,
    bindEvent,
    removeEvent
  }
})()
本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/5321a8d8.html
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！
知识共享许可协议

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true