在鼠标单击HTML上选择单个元素

时间:2017-04-21 21:17:05

标签: javascript jquery html css

我正在尝试在html页面中单击鼠标来选择单个元素。单击时,我希望能够找到我点击的元素。最终目标是能够在网页上放置一个标记,然后让该标记保持在该被点击的元素/标记附近,使用坐标在屏幕分辨率变化时将该标记保持在原位。

例如: - 如果有

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

单击鼠标我只想要选择其中一个元素,如<div><button><textarea>(进一步检测一个类/ id),而不使用{{ 1}}方法。我试着到处寻找解决方案,但没有成功。

请使用一些html / css找到jsfiddle的附加链接,随时可以帮助解释: - https://jsfiddle.net/code_Learner/qzzrmod3/11/

如果对我要做的事情感到困惑,请告诉我,我可以尝试更多地解释一下。任何有关如何开始这方面的建议/指导将不胜感激!

2 个答案:

答案 0 :(得分:0)

你正在寻找这样的东西吗?

smtplib.SMTP('smtp.gmail.com', 587)

答案 1 :(得分:0)

您可以使用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>