元素DIV作用域不同导致的BUG

  遇到一个比较奇怪的bug,由于元素div的作用域不同，导致设置的样式一直显示不出来

  graph的div作用域与selfToolTip的div的作用域不同，鼠标的位置刚好在selfToolTip的div作用域中，由于鼠标不再graph的div作用域中，随机就触发了mouseout事件，隐藏了预先设置的鼠标样式

错误代码：

//样式部分
<template>
  <!-- 原来的页面先备份留着 -->
  <div :id="htcontent" class="content">
    <tool
      :graphyId="graphyId"
      :graphView="graphView"
      :showmessage="true"
      @on-messageclick="messageClick"
    ></tool>
    <taskattri
      ref="taskattri_ref"
      @clickTask="clickTask"
      :sence="sence"
      :showBtn="false"
      :container="container"
      :graphView="graphView"
      :attriSelf="false"
    >
      <div>
        自定义属性内容
        <!--需要设置attriSelf=true-->
      </div>
    </taskattri>
    <!--新增网元 规格树-->
    <tree-modal ref="treeModal" :treeData="treeData" @onSelect="onSelect"></tree-modal>
    <!--新增网元-->
    <Modal
      :title="title"
      v-model="isShowModal"
      ok-text="保存"
      :width="800"
      :loading="loading"
      @on-cancel="newStation=false"
      :closable="false"
      :mask-closable="false"
    >
      <access-graph-element-add ref="accessGraphElementAdd"></access-graph-element-add>
      <div slot="footer">
        <Button :size="buttonSize" @click="onCancelAdd" type="text" class="close">取消</Button>
        <Button :size="buttonSize" @click="saveValidate" type="primary">保存</Button>
      </div>
    </Modal>
    <!--新增链路属性-->
    <access-segment-add ref="accessSegmentAdd" :graphView="this.graphView"></access-segment-add>
    <!--链路属性修改-->
    <Modal v-model="isShowSegmentUpdate" :width="800" @on-ok="updateAccessSegment">
      <access-segment-update ref="accessSegmentUpdate"></access-segment-update>
    </Modal>
    <!--电路方案设计-->
    <!-- <Modal
          v-model="isShowCircuitProjectDesign"
          ok-text="保存"
          title="电路方案设计"
          :loading="loading"
          draggable
          scrollable
          :closable="false"
          :width="1000"
          @on-cancel="onCancelCircuitDesignModal"
        >
          <circuit-project-design ref="circuitProjectDesign_ref"></circuit-project-design>
    </Modal>-->
    <div class="selfToolTip" :id="'selfToolTip_'+htcontent" style="display: none;">
      <div
        style="width: 10px; height: 10px; border-radius: 5px; background-color: #f75454; float: left;"
      ></div>
      <div style="float: left; margin-top: -3px;margin-left: 5px; color: #777;">{{tooltip}}</div>
    </div>
  </div>
</template>
//事件部分
<script>
   $("#" + this.htcontent).mousemove(function(e) {
        // 获得鼠标指针在页面中的位置
        if (self.status != 1) {
          //状态值不是1的时候，鼠标样式发生改变
          $("#selfToolTip_" + self.htcontent).show();
          let xPos = parseInt(e.pageX) + "px";//修改坐标，防止鼠标所在的为止在selfToolTip的div中，而不在graph的div中，从而触发mouse out 方法
          let yPos = parseInt(e.pageY) + "px";
          $("#selfToolTip_" + self.htcontent)
            .css("left", xPos)
            .css("display", "block");
          $("#selfToolTip_" + self.htcontent).css("top", yPos);
        } else {
          $("#selfToolTip_" + self.htcontent).hide(); //状态值是1的时候隐藏div
        }
      })
      .mouseout(function() {
        //生成的鼠标坐标不做改变的话，鼠标坐标在selfToolTip的div中，不再graph的div中，导致触发mousout事件，隐藏了样式
        //改变了鼠标的坐标后，鼠标就不在selfToolTip的div中，而是在graph的div中，这时就不会触发mouseout方法了
        // 当鼠标从元素上移开时，改变元素的背景色
        $("#selfToolTip_" + self.htcontent).hide();
      });
</script>

鼠标的坐标刚好在selfToolTip的DIV作用域中，随即触发了mouseout事件

效果：

图上只能看到白色鼠标箭头，看不到点击新增网元的样式改变

解决办法：将鼠标的坐标改变，移出预先设置的样式selfToolTip的div作用域，随机鼠标就坐落在graph的div作用域中，就不会触发mouseout事件改变设置好的鼠标样式了

代码：

//样式部分
<template>
<!-- 新copy的页面，重新调整样式看tooltip的区别 -->
  <div :id="htcontent" class="content">
    <tool
      :graphyId="graphyId"
      :graphView="graphView"
      :showmessage="true"
      @on-messageclick="messageClick"
    ></tool>
    <taskattri
      ref="taskattri_ref"
      @clickTask="clickTask"
      :sence="sence"
      :showBtn="false"
      :container="container"
      :graphView="graphView"
      :attriSelf="false"
    >
      <div>
        自定义属性内容
        <!--需要设置attriSelf=true-->
      </div>
    </taskattri>
    <!--新增网元 规格树-->
    <tree-modal ref="treeModal" :treeData="treeData" @onSelect="onSelect"></tree-modal>
    <!--新增网元-->
    <Modal
      :title="title"
      v-model="isShowModal"
      ok-text="保存"
      :width="800"
      :loading="loading"
      @on-cancel="newStation=false"
      :closable="false"
      :mask-closable="false"
    >
      <access-graph-element-add ref="accessGraphElementAdd"></access-graph-element-add>
      <div slot="footer">
        <Button :size="buttonSize" @click="onCancelAdd" type="text" class="close">取消</Button>
        <Button :size="buttonSize" @click="saveValidate" type="primary">保存</Button>
      </div>
    </Modal>
    <!--新增链路属性-->
    <access-segment-add ref="accessSegmentAdd" :graphView="this.graphView"></access-segment-add>
    <!--链路属性修改-->
    <Modal v-model="isShowSegmentUpdate" :width="800" @on-ok="updateAccessSegment">
      <access-segment-update ref="accessSegmentUpdate"></access-segment-update>
    </Modal>
    <div class="selfToolTip" :id="'selfToolTip_'+htcontent" style="display: none;">
      <div
        style="width: 10px; height: 10px; border-radius: 5px; background-color: #f75454; float: left;"
      ></div>
      <div style="float: left; margin-top: -3px;margin-left: 5px; color: #777;">{{tooltip}}</div>
    </div>
  </div>
</template>

<script>
  //事件部分
   $("#" + this.htcontent).mousemove(function(e) {
        // 获得鼠标指针在页面中的位置
        if (self.status != 1) {
          //状态值不是1的时候，鼠标样式发生改变
          $("#selfToolTip_" + self.htcontent).show();
          let xPos = parseInt(e.pageX+12) + "px";//修改坐标，防止鼠标所在的为止在selfToolTip的div中，而不在graph的div中，从而触发mouse out 方法
          let yPos = parseInt(e.pageY) + "px";
          $("#selfToolTip_" + self.htcontent)
            .css("left", xPos)
            .css("display", "block");
          $("#selfToolTip_" + self.htcontent).css("top", yPos);
        } else {
          $("#selfToolTip_" + self.htcontent).hide(); //状态值是1的时候隐藏div
        }
      })
      .mouseout(function() {
        //生成的坐标不做改变的话，该div在content的外面，作用域不同，会触发mouseout方法
        // 当鼠标从元素上移开时，改变元素的背景色
        $("#selfToolTip_" + self.htcontent).hide();
      });
</script>

修改鼠标的X轴坐标 修改了鼠标的坐标，是鼠标不在selfToolTip的div作用域中