元素单机事件绑定
实现方式一,使用事件名绑定:
<script src="jquery-1.2.6.js"></script>
<button id="testMsg">再点我试试!</button>
<script type="text/javascript">
$(function () {
$('#testMsg').click(function () {
alert('绑定单击事件!');
})
})
</script>
实现方式二,使用on关键字绑定:
<script src="jquery-1.2.6.js"></script>
<button id="testMsg">再点我试试!</button>
<script type="text/javascript">
$(function () {
$('#testMsg').on('click',function () {
alert('绑定单击事件!');
})
})
</script>
实现方式三,使用document关键字绑定(这种绑定适用于给后台程序打印出来的html标签进行事件绑定):
<script src="jquery-1.2.6.js"></script>
<button id="testMsg">再点我试试!</button>
<script type="text/javascript">
$(function () {
$(document).on('click','#testMsg',function () {
alert('绑定单击事件!');
})
})
</script>
元素单击事件禁用
实现方式一(通过css样式类禁用) Example Code:
<script src="jquery-1.2.6.js"></script>
<style type="text/css">
.disabled {
pointer-events: none; /*禁用当前元素的所有鼠标事件*/
}
</style>
<button id="btnEvent">点击事件测试!</button>
<button id="testMsg">再点我试试!</button>
<script type="text/javascript">
$(function () {
$('#btnEvent').click(function () {
$('#testMsg').addClass('disabled');
alert('给第二个按钮禁用了任何的鼠标事件!哈哈哈');
});
$('#testMsg').click(function () {
alert('似乎没有禁用成功啊!尴尬了');
})
})
</script>
实现方式二(通过jQuery里面的方法) Example Code:
第一种,使用“removeAttr”方法实现禁用效果:
<script src="jquery-1.2.6.js"></script>
<button id="btnEvent">点击事件测试!</button>
<button id="testMsg" onclick="clickMethod()">再点我试试!</button>
<script type="text/javascript">
$(function () {
$('#btnEvent').click(function (event) {
$('#testMsg').removeAttr('onclick');//点击当前按钮时移除第二个按钮的onclick属性,实现禁用click事件
$('#testMsg').click();
});
});
function clickMethod() {
alert('hello world !');
}
</script>
第二种,使用“disabled”属性实现禁用效果:
<button id="btnEvent" disabled="disabled">点击事件测试!</button>
注意:disabled属性一般用在类型为button或submit的input上。
第三种,使用preventDefault()方法实现效果:
$(this).click(function (event) {
event.preventDefault();
}
结语,其实前面第一种就能满足大多数的需求了。good bye !
活在当下,别在怀念过去或者憧憬未来中浪费掉你现在的生活。