在鼠標單擊時選擇單個元素HTML

我想實現在html頁面中點擊鼠標的單個元素。點擊時，我希望能夠找到我點擊的元素。最終目標是能夠在網頁上放置一個標記，然後讓該標記保持在該單擊的元素/標記的鄰近範圍內，並使用座標在屏幕分辨率發生變化時保持該標記。在鼠標單擊時選擇單個元素HTML

爲例如： - 如果不存在

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

上點擊鼠標只想不使用要被選擇像要麼<div>或<button>或<textarea>（進而檢測類/ ID）的內容之一方法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

如果這有幫助，你可以將其標記爲答案嗎？ – 2017-04-22 15:12:24

在鼠標單擊時選擇單個元素HTML

回答

相關問題