a标签（普通标签如span）没有disabled属性 ，怎样利用js实现该属性

时间：2022-08-17 19:44:11

a标签以及其她普通标签没有disabled属性，要想实现类似input框属性disabled可以通过css样式设置pointer-events的值来设定：

<!DOCTYPE html>

<html>

<head>

    <title>a onclick disabled</title>

    <script src="./js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

    <div class="body">

        <a class="page-next" href="javascript:void(0)">aAlert</a>

        <br />

        <span class="pre">spanAlert</span>

        <br />

        <input type="button" onclick="disableFn()" value="chageDisabled"/>

        <input type="button" onclick="ableFn()" value="chageAbled"/>

    </div>

    <script type="text/javascript">

        $(document).ready(function(){

            $('.page-next').click(function(e){

                e.preventDefault();

                alert('aaaaaaaaaaaa');

            })

            $('.pre').click(function(e){

                e.preventDefault();

                alert('span span span');

            })

        })

        function disableFn(){

            $('.page-next').attr('disabled',true);

            $('.page-next').css('pointer-events','none');

            $('.pre').attr('disabled',true);

            $('.pre').css('pointer-events','none')

            alert('change success');

        }

        function ableFn(){

            $('.page-next').attr('disabled',false);

            $('.page-next').css('pointer-events','auto');

            $('.pre').attr('disabled',false);

            $('.pre').css('pointer-events','auto')

            alert('change success');

        }

    </script>

</body>

</html>

　

pointer-events属性：　　

auto：与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同
none：元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
其他值只能应用在SVG上。

说明：

设置或检索在何时成为属性事件的target。
  • 使用pointer-events来阻止元素成为鼠标事件目标不一定意味着元素上的事件侦听器永不会触发。如果元素后代明确指定了pointer-events属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）。
  • 对应的脚本特性为pointerEvents。

注意; pointer-envents:none 若用在input框上时 input框 按tab键仍然是可编辑的 ，而且由于父子元素的关系很多时候连续点击仍然是可编辑的，若想该input框不能编辑，还需要设置 readOnly=“readOnly” 　

pointer-events属性详见：http://www.css88.com/book/css/properties/user-interface/pointer-events.htm　

相关文章