js中的e.preventDefault()怎么使用寻技术

本文小编为大家详细介绍“js中的e.preventDefault()怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“js中的e.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>

e.preventDefault()与return false的区别

事件处理函数的返回值(return false)只对通过属性注册的处理函数才有意义；
也就是说如果我们不是通过addEventListener()函数来绑定事件的话，那么要禁止默认事件的话，用的就是return false；

如果使用addEventListener()或者attachEvent()函数来绑定的话，就要使用e.preventDefault()方法或者设置事件对象的returnValue属性来阻止默认事件。

本文地址：https://www.xunjs.com/javascript/view_16575.html

Tags： preventdefau