取消事件默认行为（移动端）

Posted 2020-09-17 yezi-dream

       在编写功能时，遇到一个很有意思的事情，后来经过思索就解决了这个问题。

       这个功能的需求是点击一个按钮，弹出对话框，其他部分笼罩一层灰色，点击灰色后弹出框消失，如果只是这样就比较好实现，但还有其他需求，那就是这个按钮所在的这个整体内容，点击它之后会进入另一个页面，所以我的思路是使用事件冒泡，判断是点击了按钮还是内容的其他部分来决定是弹出对话框还是进入另一个页面，在点击弹出框以外的笼罩层，弹出框和笼罩层就消失，到这一步为止，都实现得很顺利，但在测试时有意思的事情就出现了，在点击灰色笼罩层时，点击部分对应到内容的话，就会进入到另一个页面，这说明点击笼罩层后也会相应点击到笼罩层下面的内容，那么这个事件会影响到两部分，现在只需要实现这个点击事件对笼罩层有作用，对笼罩层下面的内容不起作用，那么这个时候就需要在实现了笼罩层的点击后取消这个事件的默认行为，使其没有点击功能，这样就不会点击笼罩层下面的内容使得进入另一个页面了，所以就需要用到preventdefault()这个方法，即调用event.preventdefault()就可以使事件失去默认行为，event就是事件。