在鼠标单击时选择单个元素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

回答

相关问题