阻止 div 父元素的 preventDefault 会防止 input 子元素获得焦点。

Question

我有一个包含文本输入框的div。当我点击该div时，需要阻止默认行为，但是当我点击输入框以输入一些文本时，由于div（父元素）阻止了默认操作，因此无法获得焦点。

HTML

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

Javascript

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

能否解决这个问题？

- medBouzid

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>

- rrk

---

其他答案也可以，但我选择这个解决方案是因为当输入框获得焦点时，我点击父级div，它会自动触发输入框的失焦事件，而其他解决方案（测试e.target）在我点击输入框外部时不会触发失焦事件。谢谢。 - medBouzid

Answer 2

测试 e.target，如果它是输入框，则不要执行 preventDefault()。

- Quentin

---

但我非常渴望知道为什么焦点被取消了？ - Rajaprabhu Aravindasamy

@RajaprabhuAravindasamy - 因为这是单击输入框的默认行为。 - Quentin