Question

编辑：这是一个jsfiddle - 注意当你抓住中心调整大小栏并向左滑动时会发生什么 - 由于某种原因左边div中的文本内容被选中，即使我在代码中调用stopPropagation（）：
http://jsfiddle.net/2Dayx/4/ Errant text content selecting problem fiddle

我以前成功处理过鼠标传播，但这有点不寻常。我有一个2窗格的窗口和它们之间的垂直滑块（垂直滑块只是一个响应鼠标事件的薄垂直div）。

不寻常的一点是 - 当用户在中心滑块div上单击鼠标时 - 我需要获取文档以通知我鼠标移动事件，以便我可以：

1）根据鼠标方向向左或向右移动滑块，然后......

2）根据鼠标位置

调整左右div的宽度

因此，当我检测到用户点击分隔符div时 - 我将文档的'mousemove'和'mouseup'处理程序设置为我的2个函数， moveDivider（）和 endDividerMove（） （下面的代码）。

滑动面板尺寸调整div，左右面板在用户调整滑块时调整大小 - 工作正常。我可以点击分割窗口左半部分和右半部分的divider div，然后移动分隔线来改变左右两侧的大小。

问题是我的2个div中的文本内容正在选中，即。鼠标移动时突出显示。我无法弄清楚为什么，因为我在鼠标移动处理程序的最顶部调用 event.stopPropagation（）。我需要不选择任何内容，因为向左或向右移动中央调整栏，以调整左右面板尺寸。

当移动面板大小调整栏时，就好像我的div中的文本内容正在获取那些鼠标移动事件，即使我停止传播。

以下是代码：

<!DOCTYPE html>
<html>
 <head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">

<script>

 var trackDivider = false;

 function readyDividerMove(event)
 {
     //alert("readyDividerMove(), event is: " + event);
     trackDivider = true;

     document.onmousemove = moveDivider;
     document.onmouseup = endDividerMove;


     // ATTEMPT TO STOP THE 'DRAG-SELECT' OF THE MOUSE -- no help.
     event.stopPropagation();
}



function endDividerMove(event)
{
    trackDivider = false;      
    document.onmousemove = null;      
    document.onmouseup = null;      
}

function moveDivider(event)
{
      if(trackDivider == false)
        return;

      var clientWidth = window.innerWidth;
      var leftClickX = event.clientX; 


      var leftSide = (((leftClickX / clientWidth) * 100)) + "%";
      var rightPortion = (((clientWidth - leftClickX) / clientWidth) * 100) - 0.1;

     if(leftSide < 0 || rightPortion > 99.9 || ((event.clientX + 50) > clientWidth))
        return;

     var rightSide = rightPortion + "%";
     document.getElementById('leftSide').style.width = leftSide;
     document.getElementById('rightSideStuff').style.width = rightSide;
  }

  </script>
</head>

<body>
 <div id='wholepagediv' style="width: 700px; height: 500px;
      border: 3px solid green; white-space: nowrap;">
 <div id="leftSide" style="display: inline-block; vertical-align: top; 
    width: 250px; overflow-x: hidden">
   <div> HELLO THIS IS A TEST </div>  
   <div> HELLO THIS IS A TEST </div>  
   <div> HELLO THIS IS A TEST </div>  
   <div> HELLO THIS IS A TEST </div>  
   <div> HELLO THIS IS A TEST </div>  
   <div> HELLO THIS IS A TEST </div>  
   <div> HELLO THIS IS A TEST </div>  
   <div> HELLO THIS IS A TEST </div>  
   <div> HELLO THIS IS A TEST </div>  
   <div> HELLO THIS IS A TEST </div>  
   <div> HELLO THIS IS A TEST </div>  
   <div> HELLO THIS IS A TEST </div>  
 </div>
 <div id="midPageAdjustBar" style="width: 8px; height: 99%; margin: -4px;
     display: inline-block; cursor: w-resize; vertical-align: top;
     background-color: orange; border: 2px solid red" 
     onmousedown="readyDividerMove(event)">
 </div>
 <div id="rightSideStuff" style="display: inline-block; background-color: lightblue; height: 100%">
     SOME OTHER CONTENT ON  THE RIGHT SIDE
 </div>

我想知道文档是否以某种方式将鼠标移动到面板上的所有div并且然后调用我的moveDivider（）函数来调整面板的大小？

Answer 1

您没有注意水平滚动条，因此您的clientWidth错误。

替换＆＃39; window.innerWidth＆＃39;通过＆＃39; document.body.scrollWidth＆＃39;它会起作用：）

Answer 2

在找到答案后，我发现函数调用“preventDefault（）”。

无法阻止鼠标事件传播

2 个答案: