fastclick 源码注解及一些基础知识点

不做任何处理的执行及效果：

document.querySelector('.div-inside').addEventListener('click',function(e){
  console.log("inside first print");
},!1);
document.querySelector('.div-inside').addEventListener('click',function(e){
  console.log("inside second print");
},!1);
document.querySelector('.div-outside').addEventListener('click',function(e){
  console.log("outside");
},!1);
document.body.addEventListener('click',function(e){
  console.log("body");
},!1);

// 输出
/* 
 * inside first print
 * inside second print
 * outside 
 * body
*/

Event.stopPropagation执行及效果:

document.querySelector('.div-inside').addEventListener('click',function(e){
  e.stopPropagation();
  console.log("inside first print");
},!1);
document.querySelector('.div-inside').addEventListener('click',function(e){
  console.log("inside second print");
},!1);
document.querySelector('.div-outside').addEventListener('click',function(e){
  console.log("outside");
},!1);
document.body.addEventListener('click',function(e){
  console.log("body");
},!1);

// 输出
/* 
 * inside first print
 * inside second print
*/

Event.stopImmediatePropagation执行及效果:

document.querySelector('.div-inside').addEventListener('click',function(e){
  e.stopImmediatePropagation();
  console.log("inside first print");
},!1);
document.querySelector('.div-inside').addEventListener('click',function(e){
  console.log("inside second print");
},!1);
document.querySelector('.div-outside').addEventListener('click',function(e){
  console.log("outside");
},!1);
document.body.addEventListener('click',function(e){
  console.log("body");
},!1);

// 输出
/* 
 * inside first print
*/

参考文档：

MDN Event.stopPropagation

MDN Event.stopImmediatePropagation

Window.getSelection()

该方法返回一系列选择文本的参数，如选择范围，字符当前索引等

html:

<div class="text first-text">hello world!</div>
<div class="text second-text">hello world!</div>

js:

var elems = document.querySelectorAll('.text');
var len = elems.length;
while(len){
  elems[len-1].addEventListener('mouseup',function(){
    console.log(window.getSelection());
  },!1);
  len--;
}

效果：

如上图所示，参数有:

    · anchorNode:选择范围开始的node

    · anchorOffset:anchorNode中的起始索引

    · focusNode:选择范围结束的node

    · focusOffset:focusNode中的结束索引

    · isCollapsed:起始和结束是否在一个点，返回true/false

    · rangeCount:选择段的段数，貌似一直为1段，尝试按住shift选择多段，然而并不行

    · type:操作类型，如:选择:Range,插入符:Caret(input中) 等情况...

    · 其他暂时不去深究，嘿嘿！！！

 参考文档：

 MDN Window.getSelection()

 事件操作 --- 创建 -> 配置 -> 派遣

 如needsClick里的代码，创建一次不带任何handle的click事件，然后将该事件在指定元素上触发，以触发该元素上的同类型事件。

 html:

<div id="click-one">click-one</div>
<div id="click-two">click-two</div>

比如，点击click-one，给click-two创建个click事件并执行，用以触发click-two上我们写的点击事件。

··· 方式一(MDN并不推荐，标明被移出web标准):

        Document.creatEvent();

        MouseEvent.initMouseEvent();

        EventTarget.dispatchEvent();

js:

document.getElementById('click-one').addEventListener('click',function(e){
  console.log("click-one");
  var evt = document.createEvent('MouseEvents');
  evt.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
  document.getElementById('click-two').dispatchEvent(evt);
},!1);
document.getElementById('click-two').addEventListener('click',function(e){
  console.log("click-two");
},!1);

/*
语法.参数，值得注意的是最后一个参数，相关标签，mouseover和mouseout使用，其他情况传null
event.initMouseEvent(type, canBubble, cancelable, view,
                     detail, screenX, screenY, clientX, clientY,
                     ctrlKey, altKey, shiftKey, metaKey,
                     button, relatedTarget);
*/

···方式二(MDN推荐，但貌似兼容性暂时捉急):

    new Event();

    EventTarget.dispatchEvent(); 

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!