[英]Javascript mousedown and mouseup on different elements
我正在尝试使用JS开发类似于以下内容的单词搜索游戏: https : //jquery-wordsearch-game.googlecode.com/svn/trunk/demo.html
顺便说一句,我没有使用那个家伙的插件,而是尝试自己开发。
我使用以下代码来触发处理程序,以在用户单击并在其上移动时突出显示这些单元格。
$('#puzzlecontainer').on('mousedown','.block',myHandler);
问题在于,仅在第一个单元格上触发mousedown事件。 我希望处理程序在鼠标路径中的所有单元格上触发。
另外,如何使它与触摸事件兼容? 我尝试了touchmove和触地得分。
请帮忙
在Shusl的帮助下,我添加了以下代码:var ismosedown = false;
$('#puzzlecontainer').on('vmousedown','.block', function(){
globalvars.ismousedown =true;
$(this).addClass("active");
});
$('#puzzlecontainer').on('vmouseover','.block', function(){
if(globalvars.ismousedown){
$(this).addClass("active");
}
});
$('#puzzlecontainer').on('vmouseup','.block', function(){
globalvars.ismousedown = false;
});
vmouseover可在桌面浏览器上按需工作。 但这在我的Android手机和平板电脑上不起作用。 请帮忙。
触发函数以添加和删除要在mouseenter上触发的事件。 在鼠标按下时添加此事件,在鼠标按下时将其删除以停止突出显示...
$('#puzzlecontainer').on('mousedown','.block',startSelect);// Run when down
$('#puzzlecontainer').on('mouseup','.block',stopSelect);// Run when up
function startSelect(){
$('#puzzlecontainer').on('mouseenter','.block',myHandler);//Add Handler on enter.
// Fire the mouseenter event for the current element or it will not highlight.
$(this).trigger('mouseenter');
}
function stopSelect(){
$('#puzzlecontainer').off('mouseenter','.block',myHandler);//Remove Handler because mouseup.
}
您可以在每个单元格上使用mouseover
事件,并在myHandler
标志设置为true。 检查是否为真,然后将其视为mousedown
事件
var ismosedown = false;
$('#puzzlecontainer').on('mousedown','.block', function(){ ismosedown =true; } );
$('allcells').mouseover(function(){
if(ismosedown ){ // do works
}
}).mouseup(function(){
ismosedown = false;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.