Question

我对这个“工作流程”有一些问题。

我有一个div，其中包含一个用作横幅的图像，它覆盖了屏幕的很大一部分，在这个div中还有一些输入，它们附加了模糊和按键事件，因此每当用户输入它们时并点击它们做一些AJAX工作。

现在问题是这个div包含所有元素模拟文件输入的点击以选择图像来更新横幅。由于元素在里面，当我现在点击输入时，它们也模拟输入文件上的点击。

在这种情况下我该怎么办？我已经尝试为所涉及的元素设置z-index，但这不起作用，因为主div不会显示任何内容，也不会触发任何内容。

let input = document.querySelector('input[name="name"]')
input.onclick = function() {
  alert('input pressed')
}
let div = document.querySelector('.main')
div.onclick = function() {
  alert('div pressed')
}

.main {
  background-image: url('https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg');
  width: 640px;
  height: 480px;
}

input[name="name"] {
  color: white;
  background: transparent;
}

<div class="main">
  <input type="text" name="name" value="Type here pls">
</div>

这只是JS，而不是jQuery。

Answer 1

您可以使用event.stopPropagation()进行输入，但不会触及图片：

let input = document.querySelector('input[name="name"]')
input.onclick = function(e) {
  e.stopPropagation();
  alert('input pressed')
}
let div = document.querySelector('.main')
div.onclick = function() {
  alert('div pressed')
}

.main {
  background-image: url('https://fthmb.tqn.com/65lNzIRNfZY4xY02D17b1RcGvso=/960x0/filters:no_upscale()/kitten-looking-at-camera-521981437-57d840213df78c583374be3b.jpg');
  width: 640px;
  height: 480px;
}

input[name="name"] {
  color: white;
  background: transparent;
}

<div class="main">
  <input type="text" name="name" value="Type here pls">
</div>

防止过度定位元素中的事件

1 个答案: