遇到一个比较奇怪的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作用域中
网友评论