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 

a标签(普通标签如span)没有disabled属性 ,怎样利用js实现该属性的更多相关文章

  1. 让HTML标签、DIV、SPAN拥有focus事件和blur事件,聚焦和失焦

    DIV和其他普通标签是不具有onfocus和onblur事件的.INPUT和A标签为什么拥有?而DIV和SPAN等普通标签却没有?有时候我们习惯性用键盘的TAB来移动光标,仔细看你会发现,光标只在IN ...

  2. 真正让HTML标签、DIV、SPAN拥有onfocus和onblur,聚焦和失焦

    转载:http://blog.sina.com.cn/s/blog_7dfe67db01010lnq.html 默认火狐或者其他浏览器里DIV和其他普通标签是不具有onfocus和onblur事件的, ...

  3. python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  4. 区别CSS中display:box;inline;none以及HTML中 <frame> 标签<table> 标签的 frame 属性

    区别display:box:display:inline:display:none三者的不同 display:block的特点是: block是Display默认的值.总是在新行上开始:该对象随后的内 ...

  5. python 全栈开发,Day45(html介绍和head标签,body标签中相关标签)

    一.html介绍 1.web标准 web准备介绍: w3c:万维网联盟组织,用来制定web标准的机构(组织) web标准:制作网页遵循的规范 web准备规范的分类:结构标准.表现标准.行为标准. 结构 ...

  6. 前端 HTML body标签相关内容 常用标签 盒子标签 div

    盒子标签 div <div>可定义文档的分区 division的缩写 译:区 <div> 标签可以把文档分割为独立的.将他们进行分区 div在浏览器中,默认是不会增加任何的效果 ...

  7. JSP自定义标签(标签处理器 tld文件)

    标签的形式如下,标签处理器就是处理JSP页面中的标签的属性和内容,定义好之后就跟使用JSTL一样 <标签名 属性名="属性值" 属性名="属性值"> ...

  8. 前端基础-html 字体标签,排版标签,超链接,图片标签

    主要内容: 字体标签: h1~h6.<font>.<u>.<b>.<strong><em>.<sup>.<sub> ...

  9. 前端基础-html 列表标签,表格标签,表单标签

    一.列表标签 1.ul(无序列表)标签 ul(unordered list)无序列表,ul下的子元素只能是li(list item),如下示例: <ul> <li>第一项< ...

随机推荐

  1. Socket接口

    Socket接口 Socket: Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在Sock ...

  2. spring boot 启动类一定要放置到包的根目录下,也就是和所有包含java文件的包在同一级目录。如果不放置在根目录下,将会提示 no mybatis mapper was found

    spring boot 启动类一定要放置到包的根目录下,也就是和所有包含java文件的包在同一级目录.将会将同一目录下的包扫描成bean. 如果不放置在根目录下,将会提示 no mybatis map ...

  3. C语言strcasecmp()函数:判断字符串是否相等(忽略大小写)

    头文件:#include <string.h> 定义函数:int strcasecmp (const char *s1, const char *s2); 函数说明:strcasecmp( ...

  4. DLNg第三周:序列模型和注意力机制

    1.基础模型 将法语翻译为英语,分为编码和解码阶段,将一个序列变为另一个序列.即序列对序列模型. 从图中识别出物体的状态,将图片转换为文字. 先使用CNN处理图片,再使用RNN将其转换为语言描述. 2 ...

  5. 【LeetCode每天一题】 Merge k Sorted Lists(合并K个有序链表)

    Merge k sorted linked lists and return it as one sorted list. Analyze and describe its complexity. E ...

  6. CentOS6.5安装sqlite3

    1.下载安装包:https://www.sqlite.org/download.html 2.解压 [root@mycentos ~]# tar xzvf sqlite-snapshot-201809 ...

  7. numpy.meshgrid()

    numpy提供的numpy.meshgrid()函数可以让我们快速生成坐标矩阵X,Y 语法:X,Y = numpy.meshgrid(x, y)输入:x,y,就是网格点的横纵坐标列向量(非矩阵)输出: ...

  8. 20165321实验一Java开发环境的熟悉-1

  9. MongoDB--搭建mongodb服务器

    此为手动搭建: 可以看到初始化data时所有的数据,和log里已经有日志文件

  10. 9.C# 类

    1.类定义格式 [访问修饰符]class 类名 [:父类名,接口名,接口名] { //类成员 } 类的访问修饰符有public.internal两个,没有标明访问修饰符默认为internal,被int ...