ポインタイベント：キャプチャ・クリックが、どれも

Question

は、それが可能

トップ層は

ボトム層は、ワードクラウド

にあり、検索バーがあり、他の全てのポインタイベントをクリックして無効にのみ許可することはありません

私はワードクラウド内のすべての単語は、彼らが検索バーの下にある場合でもホバーすることができ、最上層にpointer-events:noneを設定しています。

は、私は、ユーザーが何かを入力したいときだから、彼ができる、入力テキストのクリックイベントを有効にしたいです。

Here is a related fiddle

テキストが入力背後にあるが、それはhoverableなければならない、 入力は、テキストの上にあるが、それはユーザが入力できるようにするために、マウスを使用してフォーカス可能でなければなりません。

注：それはプレースホルダの事のように見えますが、それはありません。私が達成しようとしていることを見て元の画像を参照してください。

Answer 1

は単なるテキストボックスにinitialとして設定し、pointer-events CSS3プロパティを追加します。 !importantを使用することもお勧めします。追加されたプロパティを渡すことができるためです。 JavaScriptので

pointer-events:initial !important 

：CSS3で

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

Answer 2

pointer-eventsはそれだけでアクセス可能になります（MouseEnterイベントなど、ホバー、クリックしてください）interactieveイベントをブロックしているので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 3

私は、これは動作するはずだと思います。親コンテナのclickイベントをリッスンして、event.clientXとevent.clientYの値がinput要素の境界内にあるかどうかをチェックします。その場合は、フォーカスをinput要素に設定できます。 input要素の下にあるランダムな単語の1つがクリックされているかどうかを判断できます。

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>