マウスクリックによる個々の要素の選択HTML

htmlページ内のマウスのクリックで個々の要素の選択を実装しようとしています。クリックすると、クリックしている要素を見つけることができます。最終的な目標は、ウェブページ上にマーカーを配置し、そのマーカーをそのクリックされた要素/マーカーの近傍にとどめ、座標を使用してマーカーの位置をスクリーン解像度が変わると維持することができるようにすることです。例えばのためのマウスクリックによる個々の要素の選択HTML

： - マウスのクリックで

<div id="div1"> 
    <Button id="button1"></Button> 
    <Textarea id="textarea1"></Textarea id=""> 
</div>

がある場合、私はちょうど使用しなくても（さらにはクラス/ IDを検出する）要素の1つは<div>または<button>または<textarea>のいずれかのように選択することにしたいです方法はonclickです。どこでも解決策を見つけようとしましたが、何も解決しませんでした。

何かを説明するために使用すること自由に感じ、いくつかのHTML/CSSでjsfiddleに添付のリンクをご覧ください： - https://jsfiddle.net/code_Learner/qzzrmod3/11/

私がやろうとしています何の混乱がある場合、私に教えてくださいと私ができますもっと説明してみてください。これをどのように始めるべきかについてのアドバイス/指示は非常に高く評価されます。

出典

2017-04-21 codeLearner

¿したがって、onclickイベントを使用したくないですか？ – Lixus

マーカーはどのように見えますか？それは選択された要素に輝く境界線ですか？ – naXa

@Lixusはい、私はonclickイベントを使用したくありません – codeLearner

あなたはこのようなものをお探しですか？

document.addEventListener('click', function (e) { 
    console.log(e.target.id); 
});

出典

2017-04-21 21:34:06 scottohara

ありがとうございました！ – codeLearner

問題ありません。明らかにあなたの最終目標に達するための道のりはまだかなりあります。しかし、幸運！ – scottohara

これはonmousedownで動作しますか？私はonmousedownで実装しようとしましたが動作しませんでした。 – codeLearner

onmousedownイベントを使用して、onclickを実装せずにマウスクリックイベントをキャプチャできます。以下のリンクを参照してくださいhttps://jsfiddle.net/jpavanaryan/qzzrmod3/14/

<script> 
function whichElement(e) 
{ 
var targ; 
    if (!e) { 
     var e = window.event; 
    } 
    if (e.target) { 
     targ=e.target; 
    } else if (e.srcElement) { 
     targ=e.srcElement; 
    } 
    var tname; 
    tname = targ.tagName; 
    alert("You clicked on a " + tname + " element."); 
} 

</script> 


<body onmousedown="whichElement(event)"> 
    <div id="container"> 
    <h1>This is a header</h1> 
     <p class="p"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris nunc, eleifend sed lacus in, tristique pharetra augue. Nulla sagittis ultricies mi, id pharetra sem feugiat in. Curabitur justo risus, varius et gravida vitae, laoreet eget libero. Sed ut orci lobortis, gravida metus quis, sodales sapien. 
     </p> 
    <ul> 
     <li>Lorem ipsum dolor sit amet, consectetur adipiscing.</li> 
     <li>Lorem ipsum dolor sit amet, consectetur adipiscing.</li> 
     <li>Lorem ipsum dolor sit amet, consectetur adipiscing.</li> 
     <li>Lorem ipsum dolor sit amet, consectetur adipiscing.</li> 
    </ul> 
     <p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mauris nunc, eleifend sed lacus in, tristique pharetra augue. Nulla sagittis ultricies mi, id pharetra sem feugiat in. Curabitur justo risus, varius et gravida vitae, laoreet eget libero. Sed ut orci lobortis, gravida metus quis, sodales sapien.</p> 
    <hr> 
     <form> 
    <textarea>Comment...</textarea> 
    <button>Submit</button> 
    </form> 
    </div> 
</body>

出典

2017-04-21 21:37:18

ありがとう、私はこれに似た何かが欲しかった。これは私をたくさん助けます。 – codeLearner

これが役立つ場合は、これを回答としてマークできますか？ –

マウスクリックによる個々の要素の選択HTML

答えて

関連する問題