javascript - div 父项上的 preventDefault 防止输入子项获得焦点

Question

我有一个包含文本输入的 div。在那个 div 的 mousedown 上，我需要防止默认，但是当我单击输入以输入一些文本时，它不会获得焦点，因为 div(父级)防止默认。

HTML

<div class="test">
    <input type="text" class="input1" />
</div>

Javascript

$(".test").on('mousedown', function(e){
    e.preventDefault();
});

有没有可能解决这个问题？

Answer 1

您可以为输入添加 e.stopPropagation();。它将阻止事件传播到父 div。

$(".test").on('mousedown', function(e){
    e.preventDefault();
});
$(".test input").on('mousedown', function(e){
    e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="test">
    <input type="text" class="input1" />
</div>

但是如果您使用click 事件，那么这将不是问题。事件将被传播，但焦点不会丢失。

$(".test").on('click', function(e){
    e.preventDefault();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="test">
    <input type="text" class="input1" />
</div>