pointer-events:none，但捕获click

Question

是否可以仅允许单击并禁用所有其他指针事件

top-layer有一个搜索栏

底层有一个单词云

我已经在顶层设置了pointer-events:none，所以单词云中的所有单词都可以悬停在上面，即使它们在搜索栏的下方。

但我希望在输入文本上启用单击事件，这样当用户想要键入某些内容时，他就可以。

​

​

Here is a related fiddle

文本在输入的后面，但它应该是可悬停的，输入在文本的上方，但它应该是可使用鼠标聚焦的，以允许用户键入。

注意:它看起来像占位符，但它不是。请看原始图像，看看我正在努力实现什么。

Answer 1

因为pointer-events正在阻止交互事件(单击、悬停、鼠标输入等)它只能通过javascript访问(例如，通过焦点)。

这可能不是最好的解决方案，但我猜在你的情况下会这样做？

(function($) {
  var focus = false;
  $(document).on('click', function(e) {
    console.log(focus);
    e.preventDefault();
    if (focus) {
      focus = false;
      $('.cl1').trigger('blur');
    } else {
      focus = true;
      $('.cl1').focus();
    }
  });
})(jQuery);

此工作解决方案的一个小问题：https://jsfiddle.net/cob02bpv/1/

编辑:你可以检查哪个元素被点击了，只有输入下的元素才是棘手的。

如果这不是解决方案，那么唯一的方法就是从输入框计算坐标，并检查click事件是在哪里触发的。但是，在输入框下面的元素仍然会有问题。

Answer 2

我想这应该行得通。侦听父容器上的单击事件，获取event.clientX和event.clientY值以检查它们是否在input元素的范围内。如果是这样，则可以将焦点设置为input元素。您仍然可以确定是否已经单击了input元素下面的某个随机单词。

​

var d = document,
    c = d.getElementsByClassName('container').item(0),
    inp = d.createElement('input'),
    a = 50,
    i = 0;


/*
 | get the clientBoundingRect of the input element
 | and if the mouse x and mouse y positions are within
 | the bounds set the focus on to the input element.
------------------------------------------------------------- */
function inpClickHndl (evt) {
  var inpRect = inp.getBoundingClientRect(),
      x = evt.clientX,
      y = evt.clientY,
      l = inpRect.left,
      w = l + inpRect.width,
      t = inpRect.top,
      h = t + inpRect.height;

  if (x >= l && x <= w && y >= t && y <= h) {
    inp.focus();
  }
}

/* 
 | ignore this, it's just to create the random words.
------------------------------------------------------------- */
function wordClickHndl (evt) {
  this.style.color = "yellow";
}

for (i; i < a; i++) {
  var p = d.createElement('p'),
      t = d.createTextNode('Random Word');
  p.appendChild(t);
  p.addEventListener('click', wordClickHndl, false);
  p.style.position = 'absolute';
  p.style.top = Math.floor(Math.random() * (window.innerHeight - 80)) + -40 + 'px';
  p.style.left = Math.floor(Math.random() * (window.innerWidth - 80)) + -40 + 'px';
  p.style.fontSize = Math.floor(Math.random() * (38 - 8)) + 8 + 'px';
  p.style.fontWeight = 'bold';
  c.appendChild(p);
}

inp.setAttribute('type', 'text');
c.appendChild(inp);

/*------------------------------------------------------------- */

// add a click handler to your parent element.
c.addEventListener('click', inpClickHndl, false);

body {
  margin: 0;
  font-family: sans-serif;
}

.container {
  position: relative;
  height: 100vh; width: 100vw;
  background-color: #1a1a1a;
}

.container p {
  color: green;
}

.container p:hover {
  color: red;
  cursor: pointer;
}

.container input {
  position: absolute;
  top: 50%; left: calc(50% - 85px);
  pointer-events:none;
  opacity: .75;
}

<div class="container"></div>

​

Answer 3

只需在文本框中添加pointer-events CSS3属性，设置为initial即可。也推荐使用!important，因为另一个属性可以传递添加的内容。

在CSS3中

pointer-events:initial !important

在JavaScript中

document.querySelector('input[type=text]').style.pointerEvents="initial"