не может остановить распространение событий мыши

EDIT: вот jsfiddle - обратите внимание на то, что происходит, когда вы берете центральную панель изменения размера и сдвигаете ее влево - по какой-то причине выбран текстовый контент в левом div, хотя я вызываю stopPropagation() в коде:
http://jsfiddle.net/2Dayx/4/Errant text content selecting problem fiddleне может остановить распространение событий мыши

Я успешно обработаны propagations мыши и раньше, но это немного необычно. У меня есть 2-оконное окно и вертикальная ползунка между ними (вертикальная полоса ползунка - это всего лишь тонкий вертикальный div, который реагирует на события мыши).

Необычное бит - когда пользователь щелкает мышью вниз на центр слайдера дел - мне нужно, чтобы получить документ, чтобы сообщить мне о перемещении мыши, так что я могу:

1) движение ползунок влево или вправо, в зависимости от направления мыши, и ...

2) отрегулировать ширину левого и правого дивы на основе положения мыши

Так что, когда я обнаруживаю щелканье пользователя на div div div - я установил обработчики 'mousemove' и 'mouseup' для моих двух функций, moveDivider() и endDividerMove() (код ниже).

Сдвижная панель, регулирующая размер, и левая и правая панели изменяются, когда пользователь настраивает слайдер - это прекрасно работает. Я могу нажать на div div div, который разбивает левую половину и правую половину окна и перемещает делитель, чтобы изменить размер левой и правой сторон.

Проблема заключается в том, что текстовое содержимое в моих двух divs получает , т.е. подсвечивается по мере перемещения мыши. Я не могу понять, почему, потому что я вызываю event.stopPropagation() в самой верхней части обработчика перемещения мыши. Мне нужно, чтобы не выбирал любое содержимое, когда центральная панель регулятора перемещается влево или вправо, чтобы отрегулировать размеры левой и правой панелей.

Когда панель регулировки размера панели перемещается, это похоже на то, что текстовое содержимое в моих divs получает эти события перемещения мыши, , хотя Я прекращаю распространение.

Вот код:

<!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>

Я интересно, если этот документ каким-то образом проходит перемещение мыши на все дивы на панелях и только тогда вызова мой moveDivider(), которая регулирует размер панелей?

источник

2014-01-27 CFHcoder

я обнаружил вызов функции «preventDefault()» после того, как справедливый кусок ищет ответа.

источник

2014-02-08 19:04:59 CFHcoder

Вы не заботитесь о горизонтальной полосе прокрутки, поэтому ваша клиентская ширина неверна.

Заменить «window.innerWidth» на «document.body.scrollWidth» и он будет работает :)

источник

2014-01-27 03:06:37 gtournie

Привет, спасибо за попытку, нет, что «прыжок вправо», который вы видели в оригинальной jsfiddle, был артефактом, который я считаю в 4-панельной компоновке jsfiddle. Нижнее правое окно jsfiddle, окно «результаты», является одним из четырех квадрантов, а на моей фактической домашней странице window.innerWidth работает отлично - потому что на фактической странице, которая находится не только в одном квадранте окно браузера - на фактической странице отсутствует «прыткость» движения центральной ползунка, которую вы видите в jsfiddle. Однако я обновил скрипку, но все же текст в левой части будет выбран. Облом. – CFHcoder

не может остановить распространение событий мыши

ответ

Смежные вопросы