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

ゝ一纸荒年。 2022-04-24 10:52 293阅读 0赞

## 元素单机事件绑定 ##

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

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

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

发表评论取消回复

表情：

评论列表（有 0 条评论，293人围观）

还没有评论，来说两句吧...

相关阅读

相关 Jquery绑定动态添加的元素的点击事件

$('tb_Reviewer').on('change', 'tr>td>checkItem', function () { alert('Jachin')

叁歲伎倆/ 2023年01月06日 11:39/ 0 赞/ 254 阅读

相关 Jquery给指定元素绑定事件

bind（) 注意：bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind() ：bind()函数只针对

- 日理万妓/ 2022年12月14日 03:52/ 0 赞/ 193 阅读

相关 Jquery 页面元素点击统计

业务需求,要统计用户点击了页面上的哪些元素. JQuery . Easy. $('a.click').each(function(i)\{ v

逃离我推掉我的手/ 2022年09月20日 08:31/ 0 赞/ 231 阅读

相关列表元素事件委托绑定鼠标右键事件

let divBox = document.querySelector('workspace_row-grid'); //事件委托给对应的元素列表绑定事件

短命女/ 2022年09月15日 05:44/ 0 赞/ 181 阅读

相关 JQuery给元素绑定事件

给a标签绑定点击事件 > < a class=“some”> < /a> > $(’.some’).each(function(i) \{ > $(this).cli

梦里梦外;/ 2022年09月09日 06:27/ 0 赞/ 244 阅读

相关 jquery获取元素绑定的事件

在调试jquery的事件绑定时会用到。查看某元素是否绑定上了事件。在JQuery1.8之前： var obj=$('div');var events=obj.da

逃离我推掉我的手/ 2022年06月13日 06:09/ 0 赞/ 706 阅读

相关动态绑定按钮点击事件

在做asp.net网站时对表格数据（操作列）进行操作（编辑和添加），制作的弹出框一模一样，只是单击事件执行代码不一样，为了不重新制作窗体，只能动态改变a标签事件。

矫情吗；*/ 2022年06月05日 08:44/ 0 赞/ 308 阅读

相关 jQuery Iframe 父页面监听子页面的鼠标点击事件

一、父页面加入iframe： <body> <iframe id="ifrmReport" src="/ReportForm/ZKZProblemSummaryPartia

墨蓝/ 2022年05月15日 08:34/ 0 赞/ 1159 阅读

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

元素单机事件绑定实现方式一，使用事件名绑定： <script src="jquery-1.2.6.js"></script> <button id="

ゝ一纸荒年。/ 2022年04月24日 10:52/ 0 赞/ 294 阅读

相关 js实现禁用，鼠标不可点击

本文所讲的禁用针对的是没有disable属性的元素，如div、li标签等，有该属性的元素如input、button标签等需要禁用可直接对此属性进行设置。鼠标不可点击主要是

古城微笑少年丶/ 2022年01月22日 04:37/ 0 赞/ 957 阅读