onMouseMove + onMouseDown для вызова функции

У меня есть настоящая проблема. Я хочу, чтобы функция вызывалась только при нажатии на объект и при перемещении мыши над объектом. Вот (синтаксис-отсталый) пример, чтобы получить ваше понимание:onMouseMove + onMouseDown для вызова функции

<div onMouseMove+onMouseDown="function()" ... ></div>

Я думал над тем, как решить эту проблему. Что делать, если я делаю onMouseDown, который вызывает функцию, которая изменит имя моей функции onMouseMove, и воспользуется функцией «filler» или «substitute»? Поясню:

<div id="object" onMouseMove="substituteFiller()" onMouseDown="nameChanger()" ... ></div> 
<script> 
    function nameChanger(){ 
     document.getElementById("object").onMouseMove = "theRealFunction()"; 
    } 
</script> 
<script> 
    function theRealFunction() ...

Когда я двигаю мышь над объектом ничего не случится, потому что функция substituteFiller() не будет работать. Но, когда мышь нажала на объект, функция onMouseMove - будет правильной, theRealFunction() и theRealFunction() теперь будут вызываться, когда мышь перемещается.

Этот способ я мог активировать/вызвать theRealFunction() только при щелчке по объекту и при перемещении мыши. Однако это не работает.

Чтобы быть ясным: как я могу изменить имя вызываемой функции? Как заставить функцию вызываться только при щелчке объекта и перемещении мыши?

С уважением, надеюсь, вы поняли! Если нет, комментарий, я думаю!

источник

2015-08-09 JakeTheSnake

Вы хотите сказать, что пользователь нажимает кнопку, и действие происходит только после перемещения мыши? –

Да, точно (переместите/щелкните по конкретному объекту)! Не когда пользователь нажимает, а не когда пользователь только перемещается, но когда пользователь нажимает (удерживает, onMouseDown) и перемещает мышь. Очень похоже на «перетаскивание» движения! :) – JakeTheSnake

Если вы нашли ответ полезным, вы можете пометить его как принятый. Не стесняйтесь спрашивать о дополнительных разъяснениях в комментариях! –

Хорошо, все вам необходимо выполнить отдельную регистрацию 3 обработчиков событий:

мыши вниз
мыши вверх
движение мыши

Вы будете иметь логический флаг переключен на истинные и ложные на мыши вниз и вверх соответственно. Затем, на обработчик мыши , вам нужно проверить, является ли флаг истинным, что означает, что кнопка мыши не работает. Наконец, мы проверяем, действительно ли курсор переместился из своего исходного положения.

Вот JSFiddle.

var example = document.getElementById("example"); 
var position = { 
    X: 0, 
    Y: 0 
}; 

example.onmousedown = function (down) { 
    downFlag = true; 
    // Record click position 
    position.X = down.clientX; 
    position.Y = down.clientY; 
}; 

example.onmouseup = function (up) { 
    downFlag = false; 
}; 

example.onmousemove = function (move) { 
    if (downFlag) { 
    if (position.X !== move.clientX || position.Y !== move.clientY) { 
     // Do stuff here 
    } 
    } 
};

источник

2015-08-09 17:17:48

Wow man, легендарный!Значит ли это, что нельзя изменить какую-либо функцию, вызываемую из, например, 'onMouseMove', используя' document.getElementById («...»). OnMouseMove = function(); '- way? Еще раз спасибо! – JakeTheSnake

Я не уверен, что вы имеете в виду. Вы можете вызвать любую функцию, которую хотите, с аргументом 'event'. Кроме того, вы можете использовать [addEventListener()] (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) –

Сво часть одного из моих веб-page..Check Это out.May это поможет вам ..

<div id="Log_frm"> 
<fieldset id="fld_1"> 
    <!--<legend>Log In</legend>-->   
    <div id="log_l" onmouseover="dv_in();" onmouseout="dv_out();" style="background-color:#0C93D4;font-size: 15px;height: 30px;padding: 7px 32px 0px 32px;font-weight:bold; float: left;-webkit-border-top-left-radius: 5px;"> 
     <a href="#" onclick="">Log In</a> 
    </div> 
    <div id="log_r" onmouseover="dv_out();" onmouseout="dv_in();"style="background-color: #0C93D4;font-size: 15px;font-weight:bold; float: right;height: 30px;padding: 7px 14px 0px 12px;-webkit-border-top-right-radius: 5px;"> 
     <a href="#">Need Any Help</a> 
    </div > 
    </fieldset> 
</div> 

<style> 
#Log_frm { 
    width: 250px; 
    height: 60px; 
    margin-top: 10px; 
    position: absolute; 
    font-size: 12px; 
    float: right; 
    right: 0px; 
} 

#Log_frm a { 
    color: #fff; 
    text-decoration: underline !important; 
    left: auto; 
    margin-right: auto; 

}

<script type="text/javascript"> 
     function dv_in() { 
      log_l.style.backgroundColor="#06C"; 
      log_r.style.backgroundColor="#0C93D4"; 
     } 
     function dv_out() { 
      log_l.style.backgroundColor="#0C93D4"; 
      log_r.style.backgroundColor="#06C"; 
     } 


</script>

Regds ..

источник

2015-08-09 17:14:28 Vijay

onMouseMove + onMouseDown для вызова функции

ответ

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