两个事件处理程序（click和mousemove）同时在一个元素上
我创建了一种滑块，当点击窗口上的某个点时，元素会将其宽度拉伸到该点。 我还想添加一个拖动事件处理程序，并且我已经阅读了关于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>
欢迎jquery ui！
你可以在这里调整divs的大小：
jquery ui可调整大小
并在这里获取范围滑块：
Jquery ui silders
编辑
绝对！ 这是做到这一点的方法。
$('#element').on('keyup keypress blur change', function() {
...
});
或者只是将该函数作为参数传递给常规事件函数：
var myFunction = function() {
...
}
$('#element')
.keyup(myFunction)
.keypress(myFunction)
.blur(myFunction)
.change(myFunction)
堆栈溢出
更新：
<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>
上一篇: two event handlers (click and mousemove) at the same time on one element