a標簽(普通標簽如span)沒有disabled屬性 ,怎樣利用js實現該屬性


 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 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM