`
马晨辉
  • 浏览: 52546 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

css3 :target 和onclick 的区别

    博客分类:
  • css3
阅读更多
首先,在移动版本上的测试结果是,直接使用Target属性来部分代替onclick
使用Target属性:touchEnd --- animationend 46ms
                click ---- animationend 37ms
                touchEnd --- click 10ms  也有时候6-8ms

使用touchEnd 追加Class:

               touchEnd --- animationend 35ms
                click ---- animationend 24ms
                touchEnd --- click 10ms  也有时候6-8ms

所以总结来看,touchEnd追加Class,比使用Target伪类要快,响应事件要短。
     
                所以说,使用Target来代替click的情况,只适合于在没有JS的情况下使用。也可以做一定的兼容来处理。
                个人觉得,还是不使用Target来部分取代 click 比较好。
分享到:
评论

相关推荐

    onclick锚点定位

    这种技术主要基于HTML的锚点(Anchor)元素和JavaScript的onclick事件,结合CSS来实现页面右侧浮动锚点的功能。下面将详细介绍这个主题的各个方面。 首先,HTML锚点是通过`<a>`标签的`href`属性与`#`符号结合使用的...

    div+css实现的两侧浮动广告JS代码

    <a href="www.csscss.org" target="_blank"> <a href="JavaScript:;" onclick="lovexin14.style.display='none'"> ``` 这里有两个`<div>`元素,它们的ID分别为“lovexin12”和“lovexin14”,分别代表...

    onclick-dropdown-menu:使用js和css制作onclick下拉菜单的最有效方法

    本教程将探讨如何利用JavaScript(JS)和Cascading Style Sheets(CSS)来创建一个"onclick"触发的下拉菜单,这是一种高效且实用的方法。 首先,我们需要创建HTML结构。一个基本的下拉菜单通常由一个主菜单项(通常...

    CSS控制按钮显示、动态添加删除行

    在网页设计中,CSS(Cascading Style Sheets)是一种用于定义HTML或XML(包括如SVG、MathML等各种XML方言)文档呈现方式的样式语言。...在实际开发中,结合使用CSS和JavaScript可以构建出更加灵活和富有活力的Web应用。

    HTML5 / CSS 3模态对话框; 没有JavaScript

    HTML5和CSS3是现代网页开发的两大核心技术,它们提供了丰富的功能和强大的样式控制,使得开发者可以构建出交互性更强、视觉效果更佳的网页。在这个主题中,我们聚焦于如何利用HTML5和CSS3创建一个无需JavaScript的...

    A样式小总结 经常要用到的A的样式

    利用CSS3的`animation`属性,可以为链接添加动态效果,增加交互性: ```css a:hover { color: #FF0000; animation: pulse 1s infinite; } @keyframes pulse { 0% { transform: scale(1); } 50% { ...

    HTML+CSS+JavaScript简单使用

    `<a>` 标签创建超链接,`href` 指定目标地址,`target` 控制新窗口或当前窗口打开,如 `_blank` 和 `_self`。`<a>` 标签还可以配合 `onclick` 等事件处理程序,实现更复杂的交互。 这些基本元素构成了 ...

    Div+CSS+JS树型菜单

    虽然提供的代码片段中没有直接展示JavaScript代码,但根据`<a href="#Menu=ChildMenu1" onclick="DoMenu('ChildMenu1')">主页</a>`中的`onclick`属性可以推测出,JavaScript部分主要负责处理菜单的展开和收起逻辑。...

    HTML试题

    * 问题3:`<body link=black>`用于定义可链接文字的颜色。 * 问题4:`<body vlink=black>`用于定义已经点击的可链接文字的颜色。 * 问题5:`<body alink=white>`用于定义正被点击的可链接文字的颜色。 * 问题6:`...

    第36章 Tree(树)组件[3]1

    以上代码创建了一个Tree组件,并绑定了onClick和onDblClick事件,当用户单击或双击节点时,会在控制台打印出节点信息。 总结,EasyUI的Tree组件通过丰富的事件机制和节点属性,使得开发者能够轻松构建交互式的树形...

    2023年HTMLJS及CSS面试与操作.doc

    - CSS样式表用于分离内容和表现,提高网页可维护性和加载速度。 - `!important`规则用于强制应用某个样式,优先级高于其他选择器。 - `media queries`用于响应式设计,根据设备特性调整布局。 - 不同浏览器可能...

    WebApplication3.rar

    2. **CSS引用**:确保引入EasyUI的CSS和JavaScript文件,以便使用其样式和功能。 ```html <link rel="stylesheet" href="path/to/easyui.css"> <script src="path/to/jquery.min.js"></script> ...

    给正在访问的链接加背景色,改变链接颜色

    CSS用于控制链接的外观,包括未访问、已访问、悬停和活动状态的不同样式。 ```css a:link, a:visited { text-decoration: none; } a:hover { color: orange; text-decoration: underline; } .subMenu .this...

    -Ventana-modal:如何使用 HTML 和 CSS 创建模态窗口:heart_suit:

    这段CSS代码定义了模态窗口的外观和位置。`display: none` 隐藏模态窗口,`position: fixed` 使其始终位于屏幕中心,`z-index` 保证它在其他元素之上。`modal-content` 类设置了模态内容的样式,包括背景色、内边距...

    javascript模态窗口

    3. 添加触发模态的按钮和数据属性:在需要触发模态窗口的元素上添加`data-toggle="modal"`和`data-target="#myModal"`属性。 4. 使用JavaScript事件处理:Bootstrap的模态插件会监听这些数据属性,自动处理模态窗口...

    js_黄金词典_js使用的黄金宝典

    - `document.styleSheets[0]` 和 `document.styleSheets[0].rules[0]`:访问CSS规则。 - 防止空链接导致页面跳转:`<a href="javascript:void(0)">word</a>`。 - 获取上一网页来源:`asp: request....

    [初学者必看]JavaScript 简单实际案例练习,锻炼代码逻辑思维

    - **CSS 样式设计:** 使用 `position` 和 `width` 控制图片的显示位置和大小。 - **JavaScript 功能实现:** - **setInterval() 函数:** 实现图片的自动轮播。 - **事件监听:** 通过绑定点击事件来切换图片。 ...

    带关闭按钮的网页漂浮广告代码(全屏漂浮)

    1. **性能优化**:考虑到性能问题,可以考虑使用CSS动画或请求动画帧(`requestAnimationFrame`)替代定时器实现平滑的动画效果。 2. **用户体验**:增加更多的关闭方式,比如设置一个定时器自动关闭广告,或者在特定...

    2021年Dreamweaver上机考试题目dreamweaver试题库网制作试题.doc

    16. 层的显示与隐藏:利用CSS的`display`属性,以及JavaScript事件监听,实现鼠标点击层1时,显示层2和层3。 17. 滚动条定制:在6.html的层3中,使用CSS的`overflow`属性设置滚动条,通过`scrollbar-face-color`等...

Global site tag (gtag.js) - Google Analytics