Javascript 在Jquery鼠标按下事件中拖动?
我的代码意味着有一个表,当点击它时,td会变成红色。再次单击时,td将返回正常颜色。我有这个工作与下面列出的代码。接下来,我想得到它,如果用户按住鼠标,他悬停的每个td都会变成红色。我不知道该怎么办?目前的代码是:Javascript 在Jquery鼠标按下事件中拖动?,javascript,jquery,html,Javascript,Jquery,Html,我的代码意味着有一个表,当点击它时,td会变成红色。再次单击时,td将返回正常颜色。我有这个工作与下面列出的代码。接下来,我想得到它,如果用户按住鼠标,他悬停的每个td都会变成红色。我不知道该怎么办?目前的代码是: <style> .Selected{ background-color :red; } </style> <script> $(document).ready(function() { $('#WeekTable td').liv
<style>
.Selected{
background-color :red;
}
</style>
<script>
$(document).ready(function() {
$('#WeekTable td').live('click', 'td', function() {
$(this).toggleClass('Selected');
});
$('#Which').click(function() {
$('.Selected').each(function(index){
alert($(this).attr("ID"));
})
});
});
</script>
<table id="WeekTable" >
<tr id="WeekRow">
<td value = "1" id="Week1">1</td>
<td value = "2" id="Week2">2</td>
<td value = "3" id="Week3">3</td>
<td value = "4" id="Week4" >4</td>
<td value = "5" id="Week5">5</td>
<td value = "6" id="Week6">6</td>
<td value = "7" id="Week7">7</td>
<td value = "8" id="Week8">8</td>
<td value = "9" id="Week9">9</td>
<td value = "10" id="Week10">10</td>
<td value = "11" id="Week11">11</td>
<td value = "12" id="Week12">12</td>
<td value = "13" id="Week13">13</td>
<td value = "14" id="Week14">14</td>
<td value = "15" id="Week15">15</td>
</tr>
</table>
<button id="Which" >Which Weeks?</button>
.选定{
背景色:红色;
}
$(文档).ready(函数(){
$('#WeekTable td').live('单击','td',函数()){
$(this.toggleClass('Selected');
});
$('#Which')。单击(函数(){
$('.Selected')。每个(函数(索引){
警报($(this.attr(“ID”));
})
});
});
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
几周?
谢谢大家 我会设置一个变量来记住鼠标当前是否按下
mouseIsDown = false;
$(window).mousedown(function(){
mouseIsDown = true;
});
$(window).mouseup(function(){
mouseIsDown = false;
});
然后在td hover事件回调中使用该变量
$("#WeekTable td").hover(function(){
if(mouseIsDown) $(this).addClass("Selected");
});
对于点击,您不必使用实时事件,只需执行以下操作:
$("#WeekTable td").click(function(){
$(this).toggleClass('Selected');
});
这里有一个办法。您可以将
mousedown
事件与jQuery一起使用。设置一个全局布尔值拖动
,默认情况下为false
,并在按住鼠标按钮时将其设置为true
,释放时返回到false
:
$(document).ready(function() {
var dragging = false;
$('html').mousedown(function(e){
dragging = true;
})
$('html').mouseup(function(e){
dragging = false;
});
$('#WeekTable tr td').mouseover(function(e){
if (dragging) {
$(this).css('background-color', 'red');
}
});
});
非常感谢你!真有魅力!