Javascript 指针事件：无，但捕获单击

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

顶层有一个搜索栏

底层有一个词云

我在顶层设置了

指针事件：none

，因此单词云中的所有单词都可以悬停在上面，即使它们位于搜索栏下方

但是我希望启用输入文本上的click事件，这样当用户想要输入某个内容时，他就可以

文本位于输入后面，但应该可以悬停， 输入在文本上方，但应使用鼠标进行聚焦，以允许用户输入

---

注意：它看起来像占位符，但实际上不是。请查看原始图像以了解我试图实现的目标。

只需在文本框中添加

指针事件

CSS3属性，设置为

初始

。使用

！重要信息

也被推荐，因为另一个属性可以通过添加的属性

在CSS3中：

在JavaScript中：

---

document.querySelector（'input[type=text]'）.style.pointerEvents=“initial”

因为

指针事件正在阻止交互事件（单击、悬停、鼠标指针等），所以只能通过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);

摆弄这个有效的解决方案：

编辑：您可以检查单击了哪个元素，只有输入下的元素会比较复杂

如果不是这样的解决方案，唯一的解决方案是从输入框计算坐标，并检查触发
单击事件的位置。但是输入框下的元素仍然会有问题。
我认为这应该可以。侦听父容器上的click事件，获取
event.clientX
和
event.clientY
值，以检查它们是否在
input
元素的范围内。如果是，则可以将焦点设置为
输入
元素。您仍然可以确定是否单击了
输入
元素下的任意单词之一


var d=document，
c=d.getElementsByClassName（'container'）。项（0），
inp=d.createElement（'input'），
a=50，
i=0；
/*
|获取输入元素的clientBoundingRect
|如果鼠标x和鼠标y的位置在
|边界将焦点设置在输入元素上。
------------------------------------------------------------- */
函数inpcClickHNDL（evt）{
var inpRect=inp.getBoundingClientRect（），
x=evt.clientX，
y=evt.clientY，
l=inpRect.left，
w=l+inpRect.width，
t=inpRect.top，
h=t+inrect.高度；
如果（x>=l&&x=t&&y如果布局允许，您可以使用相邻的兄弟组合器，前提是您对元素重新排序：

在FireFox和Chrome上测试


.backText:悬停{
颜色：红色；
}
.cl1{
不透明度：0.7；
位置：绝对位置；
}
/*相邻兄弟组合子*/
.wrap输入：悬停+div{
颜色：红色；
}
.cl1：焦点{
不透明度：1；
}

即使输入在上面，也要悬停一些文本
您有代码示例吗？有什么问题吗？您的设置是什么？据我所知，如果用户在外部单击，则不会发生任何事情，焦点应该保留在输入内部。我说的对吗？@Rajesh不是真的，输入应该只有在单击时才有焦点，否则它应该对所有事件保持透明。应该只能悬停或事件clickable？@YoramdeLangen文本框下方的文字应至少可悬停（如果可能，可单击），并且文本输入应仅可单击如果我添加此项，我将无法将鼠标悬停在文本输入按钮下方的单词上，在这种情况下，即使我单击了不在输入文本下方的单词，它也将聚焦输入。此外，如果我从word click停止播放，文档将不会获得事件。那么用户将无法使用cli点击文本框激活它，但是他可以点击其他地方（除了单词）来聚焦输入。但是，如果一个元素有边框半径（如圆形），那么它将无法按预期工作，很难捕捉文本和后面的单词上的两次点击。
(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);