jQuery: 添加DIV（内容）到发生鼠标点击的页面

Question

我什至不确定我应该在这里寻找什么（就搜索词而言）

我们有图像映射.. 我想添加一些与 'hotspot' 相关的 'hotspot' 使用 jQuery 在图像映射上单击以动态添加鼠标单击的一些内容（DIV/dropdown...等等）在 page/image 地图上。

即：图像地图被点击。一些动态填充的数据被添加到鼠标点击发生的地方显示一些数据

我想后端部分 can/will 可以使用一些 ajax 或其他任何东西来完成（现在不是真正关心的问题）..

我的困惑是前端部分。

更新：

感谢您的回答。正如你在我下面的评论中看到的......我确实使用了 position:absolute 并且只是使用了鼠标点击（捕获）的 X/Y 坐标

这是我的最终结果（减去 AJAX 调用使用的目标 php 脚本）..

<script type="text/javascript">
            //hide (initial) dynamic content container
            $("#contentDIV").hide();


            document.addEventListener("DOMContentLoaded", function(event) {             
                //jQuery code goes here 
                $('#targetMap area').on('click', function(event) {
                    //alert($(this).attr('id')); 
                    //console.log('clicked');

                    //ajax call to load dynamic data
                    //make ajax call and send data to PHP script for discount checking
                    $.ajax({
                        //async: false,
                        type: "POST",
                        url: "target_script.php?v=1",
                        //datatype: "html",
                        datatype: "text",
                        data:{
                            "targetArea": $(this).attr('id')
                        },
                        success: function(response) {
                            //alert("PHP RETURN CHECK: "+response);
                            if($.trim(response) != ''){                             
                                //update content div with returned/formatted data
                                $("#contentDIV").html("<p> MY TARGET AREA IS: " + response + "</p>");   
                                $("#contentDIV").show().css( {position:"absolute", top:event.pageY, left: event.pageX});                            
                            }else{
                                //update content div with returned/formatted data
                                $("#contentDIV").html("<p> - NO DATA WAS RETURNED FOR THIS AREA - (See Scott, you're in trouble)</p>");
                                $("#contentDIV").show().css( {position:"absolute", top:event.pageY, left: event.pageX});    
                            }
                        },
                        error: function(response) {
                            alert("PHP FAIL RETURN CHECK: "+ 'Ready State: '+ response.readyState + ' Status: ' + response.status);
                            //console.log(response);
                        }

                    });
                });

            });         
        </script>


        <p> 
            <img src="map.gif" width="560" height="280" border="0" usemap="#targetMap">
            <map id="targetMap" name="targetMap">       
                <area shape="poly" coords="514,22,507,50,479,57,477,70,458,78,451,96,490,87,503,102,531,83,540,47,533,23" href="#" alt="northeast" id="northeast">
                <area shape="poly" coords="60,135,104,181,180,186,182,162,164,135,153,112,161,82,125,72,124,106,129,134,119,133" href="#" alt="western" id="western">
                <area shape="rect" coords="3,44,123,129" href="#" alt="rocky mountain" id="rocky mountain">
                <area shape="poly" coords="149,8,129,73,163,82,153,111,183,163,176,188,214,206,237,203,277,204,280,184,281,157,292,153,291,115,278,112,281,59,281,31" href="#" alt="rocky mountain" id="rocky mountain" >
                <area shape="poly" coords="423,53,362,34,282,32,280,110,293,116,293,124,348,124,345,117,372,119,390,154,402,144,421,138,422,130,422,107,436,107,443,108,449,99,450,98,441,74" href="#" alt="midwest" id="midwest" >
                <area shape="poly" coords="249,203,273,242,309,267,328,270,352,241,375,235,398,237,402,228,399,173,383,174,389,155,373,118,339,119,344,124,292,124,291,154,282,157,280,205" href="#" alt="midsouth" id="midsouth" >
                <area shape="poly" coords="400,174,402,223,432,226,478,268,485,254,462,202,504,155,498,142,437,152,446,142,440,136,426,132,417,139,400,143,394,151,392,150,384,171" href="#" alt="southeast" id="southeast" >
                <area shape="poly" coords="503,111,499,98,487,87,449,96,442,109,423,106,421,130,448,141,442,150,456,149,496,140,499,122" href="#" alt="mid atlantic" id="mid atlantic">
            </map>
        </p>

        <div id="contentDIV" style="display:none; padding:10px; border:2px solid #ccc; background-color:#eee; font-family:Arial; font-size:12px; color:#f00;"></div>

Adding this dynamically generated content to the page/map where the mouse click happened?

Answer 1

听起来你的问题很宽泛，所以我将把我的回答集中在关于创建一个新的 div 单击鼠标的部分。

基本上，您需要这些新创建的元素具有 display: absolute; css 属性以便可以在任何地方创建它们，然后在鼠标单击事件上，使用 pageX 和 pageY 属性获取鼠标 x 和 y。

这是我制作的 JFiddle 示例，用于演示：https://jsfiddle.net/BrandonQDixon/d7yhkrzf/32/

代码如下：

$(function() {
    console.log("script begins");
    $(document).on("click",function(e) {
        console.log("Body clicked");

        let x = e.pageX;
      let y = e.pageY;

      addCircle(x,y);
  });
});

/**
* Add a circle to the document and return its handle
*/
function addCircle(x,y) {
    let e = document.createElement('div');
  $(e).addClass("circle");

  let adjX = x - 50; //click happens in center
  let adjY = y - 50; 

  $(e).css("left",adjX);
  $(e).css("top",adjY);
  document.body.appendChild(e);
  return e;
}

上述操作发生在 $(e).css("left") 和 $(e).css("top")

和CSS：

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background-color: rgba(0,0,255,0.9);
  border: 2px solid black;
  position: absolute;
}

这里的重要部分是 "position: absolute"。

jQuery: 添加DIV（内容）到发生鼠标点击的页面

jQuery: Add DIV (content) to page where mouse click happened

ajax

jquery

imagemap

placement