jQuery实现页面元素鼠标点击事件的绑定/禁用

元素单机事件绑定

实现方式一，使用事件名绑定：

<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 ！

活在当下，别在怀念过去或者憧憬未来中浪费掉你现在的生活。