提问人:SherCoder 提问时间:1/24/2013 更新时间:1/24/2013 访问量:1690
调用不带内联事件的 javascript 函数
Call javascript function without inline event
问:
我正在尝试使用用户喜欢的颜色突出显示单元格。用户将选择一个单元格并拖动鼠标以选择要使用所选颜色着色的多个单元格。当用户在不使用内联事件处理程序的情况下单击并拖动鼠标时,我如何触发位于单独文件中的 javascript 函数(我知道我必须将文件包含在 html 文件中,我已经这样做了)。
代码可以拖动和选择,但我想在用户单击并拖动单元格时调用此函数。之前我使用 google.setOnLoadCallBack 调用此函数,但这只会调用一次。我希望用户有多个选择。我希望我说得有道理。
[HTML全文]
<section id="importance">
<label class="green">Green</label>
<input type="radio" name="importance" value="green">
<label class="yellow">Yellow</label>
<input type="radio" name="importance" value="yellow">
<label class="orange">Orange</label>
<input type="radio" name="importance" value="orange">
<label class="red">Red</label>
<input type="radio" name="importance" value="red">
</section>
<table cellpadding="0" cellspacing="0" id="our_table">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<td>e</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
<td>h</td>
<td>i</td>
</tr>
</table>
Javascript的
function select_multiple() {
var isMouseDown = false;
// id for all the cells that were selected at the same time
var colorGroupId = Math.floor(Math.random() * 1000);
var highlight = find_importance_color();
$("#our_table td")
.mousedown(function () {
isMouseDown = true;
$(this).toggleClass(highlight);
$(this).attr("data-highlightedId", colorGroupId);
return false; // prevent text selection
})
.mouseover(function () {
if (isMouseDown) {
$(this).addClass(highlight);
}
});
$("#our_table td")
.mouseup(function (event) {
isMouseDown = false;
// time_importance(event);
});
}
function find_importance_color() {
return $('#importance input[name=importance]:checked').val();
}
CSS的
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
.orange {
background-color: orange;
}
.red {
background-color: red;
}
table td {
width:100px;
height:100px;
text-align:center;
vertical-align:middle;
background-color:#ccc;
border:1px solid #fff;
}
答:
3赞
Barmar
1/24/2013
#1
将初始化函数传递给 jQuery ready 处理程序:
$(document).ready(select_multiple);
然后,jQuery将在加载文档时调用它。
评论
0赞
Barmar
1/24/2013
加载 jQuery 后,脚本可以位于任何位置。
0赞
SherCoder
1/24/2013
它什么也没做。这是我在html中添加的内容。<script type="text/javascript"> $(document).ready(select_multiple); </script>
0赞
SherCoder
1/24/2013
不过我还有另一个问题。不是在 ?ready
jquery 1.8 and higher
0赞
Barmar
1/24/2013
不。 已弃用,但这是不同的。如果你愿意,你可以写,但我认为大多数人会觉得它令人困惑。$(document).bind("ready", handler)
$(select_multiple)
0赞
Brandon
1/24/2013
#2
通过最基本的更改,我相信您正在寻找的就是我在这里所做的:
http://jsfiddle.net/trakkasure/CtRYd/
// On ready function.
$(function(){
var isMouseDown = false;
// id for all the cells that were selected at the same time
var colorGroupId = Math.floor(Math.random() * 1000);
var remove = false;
$("#our_table td")
.mousedown(function () {
var highlight = find_importance_color();
isMouseDown = true;
remove = $(this).hasClass(highlight);
if (remove)
$(this).removeClass(highlight);
else $(this).addClass(highlight);
$(this).data("highlightedId", colorGroupId);
return false; // prevent text selection
})
.mouseover(function () {
if (isMouseDown) {
var highlight = find_importance_color();
if (remove)
$(this).removeClass(highlight);
else $(this).addClass(highlight);
}
});
$(document.body)
.mouseup(function (event) {
isMouseDown = false;
// time_importance(event);
});
function find_importance_color() {
return $('#importance input[name=importance]:checked').val();
}
})
我删除了对选择多个的外部函数调用,并根据是否设置了所选颜色来调整颜色的切换。
您只需要创建一次事件,因此这应该放在 jquery 文档就绪处理程序中。
此外,如果鼠标被放到表外,则不会触发鼠标向上事件。因此,在文档正文上侦听事件将解决这个问题。
评论
0赞
SherCoder
1/24/2013
感谢您指出鼠标向上事件问题。但是,我想要外部函数调用,因为我的 javascript 代码在单独的文件中,而 html 在单独的文件中。
评论
google.setOnLoadCallBack
.mousedown()
select_multiple()