preventDefault, stopPropagation, return false -JS事件处理中的坑

我们以一个文件上传ui重设计为例子来探讨这几个函数的区别：

其中的html代码如下：

<div class="file-upload">
    <input type="file" name="upload-file" class="file-upload__input" style="display: none;" />

    <div class="file-upload__drop-zone">
        <span class="file-upload__drop-zone-text">Drop files here</span>
        <a href="#" class="file-upload__btn--upload">Upload files</a>
    </div>
</div>

HTML包含有三部分内容：

1. 一个inpyout空间来处理文件上传的对话.在这里，我们设置为hidden,因为我们并不想使用浏览器默认给出的控件；

2. 一个class为file-upload__dropzone的div元素，它作为主要的"drop zone"拖拽区,如果有代码支持的话，可以直接拖拽文件到这个区域。

3. 一个a元素，它具有file-upload__btn--upload作为其css类，它作为实际的"upload files"按钮，当我们点击它时，就能够打开文件选择对话框

Javascript部分:

function fileUpload() {
  document.querySelector('.file-upload__input').click();
}

const dropzone = document.querySelector('.file-upload__drop-zone');
const button = document.querySelector('.file-upload__btn--upload');

dropzone.addEventListener('click', fileUpload);
button.addEventListener('click', fileUpload);

js也有三部分组成:

1. 一个fileUpload函数用于触发input元素的click事件

2.div和a元素获取并赋予变量

3.给这几个元素添加事件侦听，当click时就调用fileUpload函数以模拟触发file input的点击

如果我们直接实验，我们会发现很多诡异的行为：当第一个对话框打开并选择文件后，又有第二个会打开

event.preventDefault()

该函数用于阻止浏览器的默认行为(比如当我们点击a标签的时候，自然就打开a中的链接，这个行为就是默认的行为)，但是并不会阻止事件的bubbling，也就是说其父亲元素依然会接受到对应该元素的事件

在我们的例子中，当我们点击upload files按钮时，就会调用fileUpload函数，这和我们的预期时一致的。

而作为a标签，其默认行为是引导浏览器nav到href所指定的url中，在这里，我们设置为#，大多数浏览器解释为跳到页面的top处。

而跳转到页面的top处可能并不是我们希望的行为，因此，我们可以通过使用preventDefault方法来阻止这个行为。

通过修改我们的js代码，我们可以阻止a标签的默认行为，但是依然会调用fileUpload函数:

dropzone.addEventListener('click', fileUpload);

button.addEventListener('click', (event) => {
  event.preventDefault();
  fileUpload();
});

这时，虽然点击a标签不再跳转到页面top处，但是文件对话框依然会弹出两次。。。

需要注意的是：

1.preventDefault有继承性,如果在父亲元素的事件处理函数中调用了event.preventDefault，那么子元素对应的event默认行为也将丢失

2.如果希望在子组件中要覆盖这个行为，我们可以通过在子组件的event handler中最后执行 return true; 来恢复!

调试evenyout.preventDefault

有的时候，浏览器的行为非常奇怪，往往就是因为在某些组件上调用过preventDefault函数，而我们又无法知晓是哪个元素身上调用的，这时需要调试。

一个比较好的聪敏的办法是使用类似proxy代理wrapper将event的该函数重新包装：

var oldEPD = Event.prototype.preventDefault;
Event.prototype.preventDefault = function() {
    debugger;
    oldEPD.call(this);
};

这样的话就会在有该调用时代码停止供我们查找

event.stopPropagation()

这个函数可以阻止发生在子元素上的事件继续向上冒泡,但是不会阻止浏览器的默认行为.

上面的例子中，由于我们点击a元素后，a元素的click handler中会触发对话框，而随后a的click事件继续bubble到上级元素，也就是dropzone，而该dropzone元素也有监听click事件因此就又会被调用fileUpload,这就是为什么文件对话框弹出两次的原因。我们可以通过stopPropagation来阻止事件继续网上冒泡。

我们来看终级解决方案:

dropzone.addEventListener('click', fileUpload);

button.addEventListener('click', (event) => {
  event.preventDefault();
  event.stopPropagation();
  fileUpload();
});

return false

通常return false这个代码仅仅在jQuery的事件处理函数中有效，对于原生的js代码并无任何影响。

而在jquery的代码中return false又有两个效果:

1. preventDefault

2. stopPropagation

const dropzone = $('.file-upload__drop-zone');
const button = $('.file-upload__btn--upload');

$(dropzone).on('click', fileUpload);

$(button).on('click', (event) => {
  fileUpload();
  return false;
});