CSS3的pointer-events属性及典型应用

目录

• 1. 概念
• 2. 应用1
• 3. 应用2

概念

　　pointer-events是CSS3中的属性，最常用的有以下两个取值：

pointer-events:none|auto

　　设置“pointer-events:none”后元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。

---

应用1

　　当已经点击“查询”按钮且查询结果尚未返回时，可使用该属性（结合按钮颜色变化）屏蔽按钮的点击事件，防止重复查询：

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移动到最后一行，其“下移”按钮应该不能再点击）：

$("#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){//一共有10个
        $(this).next().css({"color":"#337ab7","pointer-events":"auto"});
        $tr.next().find('.table_td_text1_move_down_a').css({"color":"#ddd","pointer-events":"none"});
    }
});