Javascript 职位<；部门>；标记单击的位置

我一直在尝试将

元素定位到我单击的位置

这就是我想定位的部门

<main class="">
    <div class="overlay"></div>
    @Html.Raw(ViewBag.Breadcrumb)
    <div class="split">
        <div class="half">
            <div class="section-head">
                <i class="section-icon fa fa-calendar"></i>
                <h2>mon Calendrier</h2>
                <small>Dates à retenir</small>
            </div>
            <div class="calendar-container">
                <!-- CALENDAR -->
                <div class="action-calendar"></div>
                <!-- TOOLTIP -->
                <div class="tooltip-wrapper">
                    <div class = "day-event">
                        <span class="title"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

CSS

.tooltip-wrapper .title{
    color:#ffffff; 
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.tooltip-wrapper{
    position: absolute; 
    z-index: 2000;
    width: 100%
}

.tooltip-wrapper .day-event {
    background: #000000; 
    position: relative; 
    width:250px;
    color: #FFFFFF;
    /*height: 100px;*/ 
    line-height: 20px;
    text-align: center;  
    border-radius: 10px;
    opacity: 0.9;
    filter: Alpha(opacity=90);
    z-index: 10000;
}

.tooltip-wrapper span:after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -8px;
  width: 0; 
  height: 0;
  border-bottom: 8px solid #000000;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
}

问题是它改变了位置，但没有改变它假设的位置

---

谢谢。

您的代码输入错误。您应该使用

e.pageY

，

e.pageX

更新您的

event.pageY

，

e.pageX

var container = $(".action-calendar");
$(document).mouseup(function (e) {
     if (!container.is(e.target) && container.has(e.target).length === 0) {
          tooltip_HTML = $(".day-event .title").html();
          $(".day-event .title").html(tooltip_HTML);
          $(".day-event").fadeOut(500);
     }
     var monthEvents = $('td.dayEvent');
     $.each(monthEvents, function (key, td) {
     var x = $(td).children().attr('id', 'dayEvent-' + key);
     });
     $(".tooltip-wrapper").css({ position: "absolute", top: e.pageY, left: e.pageX });
});

---

顺便说一下，我不知道你的

.tooltip包装器的详细信息。但是这个元素不应该有一个具有相对位置的父元素。因为如果它有，
.tooltip wrapper
将通过它自己的父级来定位自身。
您的代码有一个输入错误。您应该使用
e.pageY
，
e.pageX
更新您的
event.pageY
，
e.pageX

var container = $(".action-calendar");
$(document).mouseup(function (e) {
     if (!container.is(e.target) && container.has(e.target).length === 0) {
          tooltip_HTML = $(".day-event .title").html();
          $(".day-event .title").html(tooltip_HTML);
          $(".day-event").fadeOut(500);
     }
     var monthEvents = $('td.dayEvent');
     $.each(monthEvents, function (key, td) {
     var x = $(td).children().attr('id', 'dayEvent-' + key);
     });
     $(".tooltip-wrapper").css({ position: "absolute", top: e.pageY, left: e.pageX });
});

顺便说一下，我不知道你的
.tooltip包装器的详细信息。但是这个元素不应该有一个具有相对位置的父元素。因为如果它有，
.tooltip wrapper
将由它自己的父对象定位。
event.pageX
和
event.pageY
将获取鼠标相对于页面最左上方的部分的水平和垂直位置。设置
位置时：绝对
。它的顶部和左侧值将根据其相对父容器设置

因此你得到了错误的坐标。
要解决此问题，必须在
之后设置父容器，并将其设置为
宽度：100%
设置父容器
位置：相对。既然你已经知道了整页的宽度和高度，
event.pageX
和
event.pageY
将为
top
和
left
位置提供右坐标
event.pageX
和
event.pageY
获取鼠标相对于页面最左上方的水平和垂直位置。设置
位置时：绝对
。它的顶部和左侧值将根据其相对父容器设置

因此你得到了错误的坐标。
要解决此问题，必须在
之后设置父容器，并将其设置为
宽度：100%
设置父容器
位置：相对。既然你已经知道了整页的宽度和高度，
event.pageX
和
event.pageY
将为
top
和
left
位置提供右坐标
看起来像
event.pageY
和
event.pageX
应该是
e.pageY
和
e.pageX
应该是
e.pageY
和
e.pageX