关于e.preventDefault()方法

最新推荐文章于 2023-09-25 15:16:10 发布

奔跑的瓦T

最新推荐文章于 2023-09-25 15:16:10 发布

阅读量7.8k

点赞数 6

分类专栏： js 文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_43821171/article/details/120420401

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

背景：
同事在项目中遇到的问题，在项目中导入了某一个组件作为根组件之后，发现原来的子组件中的滚动效果不再生效，因为是移动端的项目，所以这里的滚动效果是通过touchmove事件进行触发的，在对引入的组件进行研究后，发现是在根组件中阻止了touchmove事件的默认事件，也就是调用了e.preventDefault()方法，然后同事们通过阻止冒泡阻止了这个方法的调用，解决掉了因为引入组件而带来的问题，但这却引发了一连串的有关于preventDefault()这个方法的思考。

问题：
为什么我在父组件上使用preventDefault()，阻止默认事件会导致我的子组件的默认事件失效？

分析：
首先，我们看官网对event.preventDefault()这一方法的解释，在繁体中文版的MDN网站中，只是简单的提到了取消事件的预设行为，而不影响事件的传递。如字面意思，很好理解。

而在简体中文版的MDN网站中，对于此事件描述的文字对比繁体版较多

在这里提到一个词，叫显示处理，不是很能理解这个词。繁体版与简体版的比较对应下来，也能够说的过去，所以这里并不能解决我们的疑问，到底为什么在父元素上调用了这个方法阻止默认事件，子元素的默认事件也消失了？

持续跟进：
翻遍了百度，我没有找到有关于这个问题的解答，莫得办法了，只有自己去试着找一些结论性的东西。

尝试：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            height: 300px;
            overflow: auto;
            width:200px;
            padding: 40px;
            margin: 0 auto;
            background: grey;
        }
        #gdfather{
            position: relative;
            height: 600px;
            overflow: auto;
            width:400px;
            margin: 40px;
            background: rgba(0, 255, 255, 0.219);
        }
        #father{
            position: absolute;
            top: 20px;
            height: 200px;
            overflow: auto;
            width: 600px;
            margin: 40px;
            background-color: rgba(128, 128, 128, 0.349);
        }
        #son{
            position: absolute;
            top: 20px;
            height: 1400px;
            width: 800px;
            margin: 40px;
            background-color: rgba(205, 92, 92, 0.26);
        }
        #box2{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            height:200px;
            width: 200px;
            background-color: khaki;
        }
    </style>
</head>
<body>
    <div id='box'>
        <div id='gdfather'>
            <p>祖先中的内容</p>
            <p>祖先中的内容</p>
            <p>祖先中的内容</p>
            <p>祖先中的内容</p>
            <p>祖先中的内容</p>
            <p>祖先中的内容</p>
            <p>祖先中的内容</p>
            <p>祖先中的内容</p>
            <p>祖先中的内容</p>
            <div id='father'>
                <p>父亲中的内容</p>
                <p>父亲中的内容</p>
                <p>父亲中的内容</p>
                <p>父亲中的内容</p>
                <p>父亲中的内容</p>
                <p>父亲中的内容</p>
                <p>父亲中的内容</p>
                <p>父亲中的内容</p>
                <p>父亲中的内容</p>
                <div id='son'>
                    <p>儿子中的内容</p>
                    <p>儿子中的内容</p>
                    <p>儿子中的内容</p>
                    <p>儿子中的内容</p>
                    <p>儿子中的内容</p>
                    <p>儿子中的内容</p>
                    <p>儿子中的内容</p>
                    <p>儿子中的内容</p>
                    <p>儿子中的内容</p>
                </div>
            </div>
        </div>
    </div>
    <div id='box2'>
        <input id="ipt" type="text">
        <div id='inbox'>
            <input id='inIpt' type="text">
        </div>
    </div>
    <script>
        let gdfather=document.getElementById('gdfather')
        let father=document.getElementById('father')
        let son=document.getElementById('son')
        gdfather.addEventListener('touchmove',(e)=>{
            // console.log('gdfather')
            // e.preventDefault()
        })
        father.addEventListener('touchmove',(e)=>{
            // console.log('father')
            console.log(e.preventDefault.toString())
            console.log(e)
        })
        let box2=document.getElementById('box2')
        let inbox=document.getElementById('inbox')
        let ipt=document.getElementById('ipt')
        let inIpt=document.getElementById('inIpt')
        let events
        box2.addEventListener('keydown',(e)=>{
            // e.preventDefault()
            console.log(e===events)
        })
        ipt.addEventListener('keydown', (e)=>{
            console.log(e===events)
            console.log(JSON.stringify(e)===JSON.stringify(events))
            events=e
        })

        inIpt.addEventListener('keydown', (e)=>{
            // e.preventDefault()
            events.preventDefault()
            console.log(events)
        })
    </script>
</body>
</html>

总结
元素并不拥有事件，实际上，元素只是对事件进行了一个监听。就比如一个人进行一场马拉松比赛，
这个人进行比赛的这个过程，就是事件从诞生到结束的整个过程。而在比赛的途中，我们设置了一些里程点，每一场马拉松比赛都会在里程点设置对应的补给，我们规定每到达一个补给点就会进行补给，这个可以看作事件的默认行为。当事件每到达一个里程点时，我们可以在这个里程点做一些事，比如欢呼之类的（也就是设置事件监听），也可以啥都不做。这个里程点就是元素，而欢呼就是元素在监听到这个事件时我们设置的行为。
实际上，即使是同一个事件，所拥有的event也是不同的，这个在上面的118和119行可以进行证明，而同一类型的事件在触发时只会拥有这一个event,这一点通过118和115可以证明，对应到马拉松就是每一次马拉松都是不同的，而一条路线上只可能进行一场马拉松比赛。当我们阻止事件冒泡时，相当于我们在跑到23公里时，放弃了这场比赛，那么在32公里处等着为我们欢呼的人就永远不会触发这个动作。而我们在使用event.preventDefault()这个方法时，相当于我们撤掉了所有的里程点的补给，自然也就没有了默认行为，但我们还在跑，原来在32公里处为我们欢呼的人依旧会为我们欢呼。

在通过上面的分析后，已经可以很好的理解为什么在父组件中使用了preventDefault()，而子组件也没有默认行为了，因为所有的补给都被撤掉了。即在这一条线上所有的默认行为都没有了。

以上就是我的理解了，望指正！！！！

奔跑的瓦T

关注

6
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
关于e.preventDefault()方法

背景：同事在项目中遇到的问题，在项目中导入了某一个组件作为根组件之后，发现原来的子组件中的滚动效果不再生效，因为是移动端的项目，所以这里的滚动效果是通过touchmove事件进行触发的，在对引入的组件进行研究后，发现是在根组件中阻止了touchmove事件的默认事件，也就是调用了e.preventDefault()方法，然后同事们通过阻止冒泡阻止了这个方法的调用，解决掉了因为引入组件而带来的问题，但这却引发了一连串的有关于preventDefault()这个方法的思考。问题：为什么我在父组件上使用pr
复制链接

扫一扫