H5+jq 父元素绑定事件 处理子元素所有的事件(二)

最新推荐文章于 2024-04-12 05:03:47 发布
最新推荐文章于 2024-04-12 05:03:47 发布
阅读量527 收藏 1
点赞数
分类专栏： 前端 文章标签： javascript js html5 jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43639981/article/details/108592748
版权
本文介绍了如何在H5中使用父元素直接绑定ontouch onclick事件，来处理子元素的所有事件。通过event.currentTarget获取绑定事件元素，event.target获取触发事件元素，以此实现类似jQuery的事件监听效果，可以针对不同子元素进行操作。
摘要由CSDN通过智能技术生成

如何使用元素上直接绑定ontouch onclick的方式实现相同的效果，而不需要使用jquery的监听，示例html部分代码如下：

<td class="bt-1" onclick="test()" style="width:50%;
最低0.47元/天 解锁文章
RunningOnMyWay
关注
专栏目录
H5+jq 父元素绑定事件 处理子元素所有的事件(一)
weixin_43639981的博客
06-23 1025
下方以一个按压效果为例，分别绑定了touchstart、touchmove、touchend三种事件，其他的click事件也可以参照；使用e.target(获取到当前事件触发的节点)，又通过e.target.nodeName.tolowerCase()获取可对比的小写tagname，来定位不同位置产生的事件；当然，也可以更复杂一些，在对应的元素上设置不同的className或者其他属性，通过对属性的判断可以区分一些相同tagname，用于做不同的事件处理。 <!DOCTYPE html> &lt
js 给父元素的每个子元素绑定事件
weixin_30284355的博客
02-23 777
如：给ul下的li(或li下的XX)绑定事件 <ul id="ul1"> <li><span>1</span></li> <li>2</li> </ul> <script type="text/javascript"> function addEventH...
JavaScript事件委托-为父级添加监听并作用到子级
只写有用的笔记
05-07 451
我们的最终目的是保证只有点击 button 子元素才去执行事件的回调函数，如何判断用户点击是哪一个子元素呢？优化过的代码只对祖先元素添加事件监听，相比对 10000 个元素添加事件监听执行效率要高许多！事件委托是利用事件流的特征解决一些现实开发需求的知识技巧，主要的作用是提升程序效率。大量的事件监听是比较耗费性能的，如下代码所示。
父html怎么调用子html方法,如何从父组件调用html事件方法到子组件
weixin_35035699的博客
06-04 373
我有以下父组件。JSimport { Component, OnInit } from '@angular/core';import { TaskService } from '../task.service';import { ViewChild } from '@angular/core/src/metadata/di';import { CreateNewTaskComponent } fr...
js 绑定无响应 父元素监听，绑定子元素，事件绑定的几种方法以及区别
weixin_30892037的博客
12-25 287
事件绑定的几种方法：bind,on,delegate,live 先准备一个html页面再对其中的元素进行事件绑定： <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="http://libs.baid...
vue中在父组件点击按钮触发子组件的事件
最新发布
m0_63102527的博客
04-12 472
webpack的loader到底是什么样的？两小时带你写一个自己loader。(img-TI2krYJB-1712869411344)]打开全栈工匠技能包-1小时轻松掌握SSR。谁说前端不用懂安全，XSS跨站脚本的危害。网易内部VUE自定义插件库NPM集成。生产环境下如歌部署Node.js。两小时精通jq+bs插件开发。
css+js+jq实训笔记
weixin_42757570的博客
07-02 1372
css+js+jq实训笔记css第一天css第二天css第三天css第四天css第五天css第六天js第一天js第二天js第三天js第四天js第五天js第六天jq第一天jq第二天jq第三天 css第一天 1、平时有空多记单词（很多新单词） 2、用谷歌浏览器调试代码 3、多看看公众号和网站（对面试有很大的帮助，也可以帮助了解前端） 4、爱果果（可以去玩一下） 5、egret白鹭科技（游戏开发） 6、小程序API，要学会读懂文档、手册 7、学习PS 8、提高自己的审美 9、计算机网络、数据结构 考研408 10
jQuery-选择器-筛选器-元素增加删除-属性样式-事件-动画-插件
weixin_57218747的博客
05-12 1363
jQuery 一 jQuery 的基础 1.1 jQuery 的版本 不同的开发版本 jquery.js 开发版（不压缩） jquery.min.js 产品版（压缩过） jquery.slim.js 简化版（去掉了动画功能和ajax功能） https://www.bootcdn.cn/ 版本号 1.x.x 兼容IE6~IE8 2.x.x 和 3.x.x 需要 IE9 以上浏览器支持 1.2 如何使用 jQuery 需要把 jQuery 文件导入到 html 中，自己写的 js 代码需要在 jQuery
WEB入门之十四 jQuery事件
张晨光老师的播客
02-24 3339
学习内容ØjQuery各种事件ØjQuery事件绑定能力目标Ø能熟练使用jQuery各种事件Ø能熟练绑定jQuery事件本章简介JavaScript是事件驱动型的编程语言，即JavaScript和HTML之间的交互是通过用户和浏览器操作页面时触发的事件来驱动进行的。使用传统的JavaScript就能处理这些交互，但是jQuery增加并扩展了JavaScript事件处理机制，使其使用起来更
jquery获取当前元素的子元素的自定义属性值
giveMe_Five的博客
03-31 1万+
1.获取自定义属性值简单 直接可以$.attr("data-id");2.获取当前元素的子元素$("id").children()可以返回所有的子元素,孙子,重孙子一级的都不会获取.$("id").find() 会将所有的子级包含 孙子级都获取 ,所有不建议使用 ;3.获取元素的子元素的自定义属性值呢?&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&
javascript事件委托//就是父级事件给子级
weixin_30326515的博客
03-28 224
<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .a{ width:100px; height:100px; background:red; } </style></head><body&g...
HTML5表格介绍以及基本应用
L20220927Y的博客
10-26 2523
可以的话，麻烦关注一下，互相关注噢
div点击父元素后只要特定的子元素响应（jquery举例）
baidu_40537062的博客
09-28 736
举例1 $(".applyDialog").on("click",function(e){ if(e.target.className=="aaMIRight choosed"){ //执行代码 $(".applyDialog").removeClass("choosed"); }else{ return; } }); 举例2 ...
JavaScript 事件冒泡和事件捕获
wanghongpu9305的博客
03-02 240
什么是事件 JavaScript和HTML之间的交互是通过事件实现的。 事件：就是文档或浏览器窗口发生的一些特定的交互瞬间。 监听器（或事件处理程序）：预定事件，以便事件发生时执行相应的代码。 通俗的说，这种模型其实就是一个观察者模式。（事件是对象主题，而这一个个的监听器就是一个个观察者） 什么是事件流 事件流描述的就是从页面中接受事件的顺序。 而早起的IE和Netscape提出了完全相反的事件流概念，IE事件流是事件冒泡，而Natscape的事件流就是事件捕获。 事件冒泡事件捕获 I...
Jquery实现点击子元素标签只触发子元素点击事件，不触发父元素点击事件
热门推荐
白驹过隙
06-07 2万+
最近写代码遇到一个细节的小问题，点击子元素标签不仅触发了子元素点击事件，还会执行父元素点击事件，例如: 子元素 tabclose="11" > 子元素 为li标签和i标签都添加点击事件后，当我点击i标签区域，li标签的点击事件也会触发，后来经过查询文档发现，避免这个问题只需要为i标签的点击事件上加上jquery防止事件冒泡即可，如下： $("i").on("click",
jquery防止冒泡事件，冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件
unique_jx的博客
09-28 7399
jquery之防止冒泡事件，冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件
jq h5鼠标滑动事件 touch
09-09
jq是指jQuery，它是一个快速、简洁的JavaScript库。H5是指HTML5，它是HTML的最新版本，引入了许多新特性和API。 在jQuery中，我们可以利用鼠标滑动事件和触摸事件来对H5页面进行交互效果的开发。 鼠标滑动事件是指在网页中使用鼠标滑动的动作。在jQuery中，我们可以使用.mousemove()方法来捕捉和处理鼠标滑动事件。通过绑定.mousemove()方法到相关的 HTML 元素上，我们可以执行一系列的动作，例如改变元素的位置、颜色、大小等等，从而实现一些有趣的视觉效果。 而触摸事件是指在触摸屏上进行的交互动作。在jQuery中，我们可以使用.touch()方法来监听触摸事件。通过绑定.touch()方法到相关的 HTML 元素上，我们可以实现类似于鼠标滑动事件的效果，只不过是通过手指在屏幕上的滑动来触发相应的动作。 无论是鼠标滑动事件还是触摸事件，都可以通过jQuery来捕捉和处理，从而实现更加丰富、流畅的交互效果。通过灵活运用这些事件，我们可以为H5页面带来更好的用户体验，提升页面的互动性和趣味性。 总结：通过使用jQuery的鼠标滑动事件和触摸事件，我们可以为H5页面添加各种交互效果。无论是通过鼠标滑动还是通过触摸屏的手指滑动，都可以通过jQuery来实现相应的效果，从而提升用户体验和页面的互动性。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值