目录 
概念
pointer-events是CSS3中的属性，最常用的有以下两个取值：
1
| pointer-events:none|auto
|
设置“pointer-events:none”后元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
应用1
当已经点击“查询”按钮且查询结果尚未返回时，可使用该属性（结合按钮颜色变化）屏蔽按钮的点击事件，防止重复查询：
1
2
3
4
5
6
7
8
9
10
11
| function btnStatusHandler(operation){
if(operation == "toSearch"){
$("#submitButton").html("查询中...");
$("#submitButton").css("background-color","#EDEFF3");
$("#submitButton").css("pointer-events","none");
} else {
$("#submitButton").html("确定");
$("#submitButton").css("background-color","transparent");
$("#submitButton").css("pointer-events","auto");
}
}
|
应用2
在编辑列表选项可以上下移动交换位置的数据时，当某个item移动到第一行，其“上移”按钮应该不能再点击（同理，但某个item移动到最后一行，其“下移”按钮应该不能再点击）：
1
2
3
4
5
6
7
8
9
10
11
| $("#histogram_data_right").find('.table_td_text1_move_up_a').on('click',function(index){
var $tr = $(this).parents("tr");
$tr.prev().before($tr);
if($tr.index() == 1){
$(this).css({"color":"#ddd","pointer-events":"none"});
$tr.next().find('.table_td_text1_move_up_a').css({"color":"#337ab7","pointer-events":"auto"});
}else if($tr.index() == 9){
$(this).next().css({"color":"#337ab7","pointer-events":"auto"});
$tr.next().find('.table_td_text1_move_down_a').css({"color":"#ddd","pointer-events":"none"});
}
});
|
