два обработчика событий (щелчок и mousemove) одновременно на одном элементе

Question

Я создаю своего рода слайдер, который, когда щелкнет определенная точка в окне, будет растягивать его ширину до этой точки. Я также хотел бы добавить обработчик события перетаскивания, и я прочитал о mousedown и mousemove и mouseup, которые являются тремя обработчиками, которые необходимо объединить. Этот код работает очень хорошо, но мне интересно, есть ли лучший способ объединить этих обработчиков, потому что в настоящий момент я повторяю код, который я не уверен. Я совершенно новичок в javascript и jquery. Спасибо за помощь

function reposition_bar(mouse_touch_position){ 
    document.onclick = function(mouse_touch_position){ 
     var timer_bar_position = $(timer_bar); 
     timer_bar_offset = timer_bar_position.offset(); 
     var total_width_timer = $("#timer_bar_outer0").width(); 
     var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/ 
     player.currentTime = (window.duration)*(new_width_timer/100); 
    } 
    document.onmousemove = function(mouse_touch_position){ 
     var timer_bar_position = $(timer_bar); 
     timer_bar_offset = timer_bar_position.offset(); 
     var total_width_timer = $("#timer_bar_outer0").width(); 
     var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/ 
     player.currentTime = (window.duration)*(new_width_timer/100); 

    } 
    this.onmouseup = function() { 
    document.onmousemove = null; 
    } 

} 

и вот где я создаю прослушиватель событий.

$(timer_area).on("mousedown", reposition_bar); 

мой HTML:

<div id="timer_area0" class="timer_area"> 
    <div id="timer_bar_outer0" class="timer_bar_outer"></div> 
    <div id="timer_bar0" class="timer_bar"></div> 
</div> 

и мой CSS:

.timer_area{ 
position: relative; 


width: 100%; 
margin: 20px auto 10px auto; 
height: 20px; 
backgroud: #fff; 
} 

.timer_bar{ 
z-index: -1; 
display: block; 
width: 3%; 
height: 8px; 
border-radius: 4px; 
clear: both; 
position: absolute; 
margin-top: 6px; 
box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5), 
       0px 0px 3px 2px rgba(250,250,250,1); 
background-color: #fff; 
} 

.timer_bar_outer{ 
padding: 0px 3% 0px 3%; 
    width: 100%; /*this should be same number as 100/windowduration*/ 
    height: 20px; 
    display: block; 
    z-index: -2; 
    position: absolute; 
    background-color: rgb(0,0,0); 
margin-left: -3%; 
border-radius: 10px; 
box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1), 
       inset 0px 1px 2px rgba(0, 0, 0, 0.5); 
box-sizing: content-box; 
} 

.timer_bar.on{ 
    background-color: blue; 
    box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5), 
       0px 0px 3px 2px rgba(5,242,255,1); 
} 

Редактировать после @tlindell комментарий:

спасибо за ваш комментарий. Я пробовал ползунки диапазона, но не мог их стилизовать с помощью CSS, как я хотел, после много исследований. (т. е. мой вертикальный слайдер работал идеально, пока я не наложил на него тень коробки, и он больше не работал вертикально) ... Я доволен своим слайдером. его просто мне было интересно, если я мог бы написать метод reposition_bar лучше, потому как ив сделали это выше, этот код:

document.onclick = function(mouse_touch_position){ 
      var timer_bar_position = $(timer_bar); 
      timer_bar_offset = timer_bar_position.offset(); 
      var total_width_timer = $("#timer_bar_outer0").width(); 
      var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/ 
      player.currentTime = (window.duration)*(new_width_timer/100); 
     } 

является exaclty так же, как это принимают они разные обработчики событий, например OnMouseMove и OnClick:

document.onmousemove = function(mouse_touch_position){ 
      var timer_bar_position = $(timer_bar); 
      timer_bar_offset = timer_bar_position.offset(); 
      var total_width_timer = $("#timer_bar_outer0").width(); 
      var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/ 
      player.currentTime = (window.duration)*(new_width_timer/100); 

     } 

так я могу объединить их в пути, например

document.onmousemove || document.onclick = function(mouse_touch_position){ 
       var timer_bar_position = $(timer_bar); 
       timer_bar_offset = timer_bar_position.offset(); 
       var total_width_timer = $("#timer_bar_outer0").width(); 
       var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/ 
       player.currentTime = (window.duration)*(new_width_timer/100); 

      } 

Спасибо за ваш редактировать @tlindell. Это что-то вроде того, что я хотел бы, но я попробовал следующее, которое действительно не имеет желаемого эффекта. Он не регистрирует событие mouseup.

function reposition_bar(mouse_touch_position){ 
    document.onmousemove = function(mouse_touch_position){ 
     var timer_bar_position = $(timer_bar); 
     timer_bar_offset = timer_bar_position.offset(); 
     var total_width_timer = $("#timer_bar_outer0").width(); 
     var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/ 
     player.currentTime = (window.duration)*(new_width_timer/100); 

    } 
    this.onmouseup = function() { 
    document.onmousemove = null; 
    } 

} 

$(timer_area).on("mousedown click", reposition_bar); 

Я хотел бы функцию, которая будет вызвана с OnMouseDown, а затем в функции я хотел бы, чтобы обрабатывать события OnMouseMove и OnClick. я могу сделать что-то подобное в функции reposition_bar:

function reposition_bar(mouse_touch_position){ 
    document.on("mousemove click") = function(mouse_touch_position){ 
     var timer_bar_position = $(timer_bar); 
     timer_bar_offset = timer_bar_position.offset(); 
     var total_width_timer = $("#timer_bar_outer0").width(); 
     var new_width_timer = (((mouse_touch_position.pageX - timer_bar_offset.left)/total_width_timer) * 100); /*converting to percantages because the width of the timer is in percentages in css*/ 
     player.currentTime = (window.duration)*(new_width_timer/100); 

    } 
    this.onmouseup = function() { 
    document.onmousemove = null; 
    } 

} 

$(timer_area).on("mousedown", reposition_bar); 

Это не работает на всех, хотя, так что я предполагаю, что синтаксис является неправильным в этой строке внутри функции:

document.on("mousemove click") = function(mouse_touch_position){ 

} 

Еще раз спасибо. Я совершенно новичок в этом :)

Спасибо @tlindell за ответ. Это то, что я сделал в конце. (см. раздел window.onload для редактирования)

<script> 
    var player; 
    var intv; 
    var duration; 
    var song_id; 
    var button; 

    //init 
window.onload = function(){ 
     player = document.getElementById('audio_player'); 


      $('#volume_control_area').on('mousedown mouseup mouseleave click', function(e){ 
       if(e.type === 'mousedown'){ 
         $(this).bind('mousemove', reposition); 
       } 
       else if((e.type === 'mouseup') || (e.type === 'mouseleave')) { 
         $(this).unbind('mousemove', reposition); 
       }else if(e.type === 'click'){ 
         $(this).bind('click', reposition); 
       } 
      }); 
} 

function reposition(mouse_volume_position){ 

     var volume_knob_position = $(".volume_control_knob"); 
     volume_area_offset = $('#volume_control_area').offset(); 
     var total_height_volume = $('#volume_control_area').height(); 
     console.log(total_height_volume); 
     var new_height_volume = ((volume_area_offset.top + total_height_volume)- mouse_volume_position.pageY); /*converting to percantages because the width of the timer is in percentages in css*/ 

     if(new_height_volume > 8 && new_height_volume <= 100){ 
     console.log(new_height_volume); 
     player.volume = new_height_volume/100; 
     $(".volume_control_knob").css({ 

     'height' : new_height_volume + '%' 

     }); 
     } 

} 




</script> 

Answer 1

Добро пожаловать JQuery ui!

вы можете изменить размер дивы здесь:

jquery ui resizable

и получить ползунки диапазон здесь:

Jquery ui silders

EDIT

абсолютно! вот способ сделать это.

$('#element').on('keyup keypress blur change', function() { 
    ... 
}); 

Или просто передать функцию в качестве параметра нормальных функций событий:

var myFunction = function() { 
    ... 
} 

$('#element') 
    .keyup(myFunction) 
    .keypress(myFunction) 
    .blur(myFunction) 
    .change(myFunction) 

stackoverflow

UPDATE:

<script> 
var player; 
var intv; 
var duration; 
var song_id; 
var button; 

//init 
window.onload = function(){ 
    player = document.getElementById('audio_player'); 

    $('#volume_control_area').on('mousedown mouseup', function(e){ 
     if(e.type === 'mousedown'){ 
      $(this).bind('mousemove', reposition); 
     } 
     else if(e.type === 'mouseup'){ 
      $(this).unbind('mousemove', reposition); 
     } 
    }) 
} 

function reposition(mouse_volume_position){ 
var volume_knob_position = $(".volume_control_knob"); 
    volume_area_offset = $('#volume_control_area').offset(); 
    var total_height_volume = $(volume_control_area).height(); 
    console.log(total_height_volume); 
    var new_height_volume = ((volume_area_offset.top + total_height_volume)- mouse_volume_position.pageY); /*converting to percantages because the width of the timer is in percentages in css*/ 

    if(new_height_volume > 8 && new_height_volume <= 100){ 
     console.log(new_height_volume); 
     player.volume = new_height_volume/100; 
      $(".volume_control_knob").css({ 

       'height' : new_height_volume + '%' 

      }); 
    } 
} 




</script>