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" οnclick="disableFn()" value="chageDisabled"/>
<input type="button" οnclick="ableFn()" value="chageAbled"/>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.page-next').click(function(e){
e.preventDefault();
alert('aaaaaaaaaaaa');
})
$('.pre').click(function(e){
htmlbutton属性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” 

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。