jtopo画布拖拽的时候,鼠标点到画布以外的地方(菜单部分)的时候会选中菜单部分的文本,并打开新页面,同时鼠标箭头一直转圈圈,鼠标松开后拓扑图还能动,用户体验极为不好。

在写jtopo时遇到上述问题,效果如下图所示:

jtopo画布拖拽的时候,鼠标点到画布以外的地方(菜单部分)的时候会选中菜单部分的文本,并打开新页面,同时鼠标箭头一直转圈圈,鼠标松开后拓扑图还能动,用户体验极为不好。

遇到这个问题,首先我想到的就是鼠标拖拽的时候禁止选中文本,上网查了一下,果然有此类信息,以下是我查到的链接:https://www.cnblogs.com/Sky-Ice/p/10137284.html

他里面有css方法和js方法,我都试了一下,css方法比较好用,而且兼容性我测到了ie11,主流浏览器都是兼容的,代码如下:

/*防止鼠标拖拽的时候点到画布以外的地方导致鼠标一直转圈,自动在浏览器打开新页面,并且在鼠标松开时画布还在跟着动的bug*/
div{
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
}

那个js就有点不友好了,因为我们拓扑图上方工具栏有个搜索的input框,用js的话会连那个input框一起禁掉,还要想办法去除文本框比较麻烦,具体用哪个看本人需求。