开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么<li>标记不能接受data-id属性？O点事件无法获取id

<li>标记不能接受data-id属性的原因是HTML规范中没有定义<li>标记可以接受data-id属性。HTML规范中规定了<li>标记的属性列表，包括class、id、style等，但并没有包括data-id属性。

<li>标记是HTML中用来表示一个列表项的标签，通常用于创建有序或无序列表。它是一个块级元素，可以包含文本、图像或其他HTML元素。

在HTML中，可以使用自定义属性来存储额外的数据，例如data-id属性。但是对于特定的元素，浏览器会对一些属性进行解析和处理。对于<li>标记来说，浏览器通常会忽略data-id属性，不会将其作为合法的属性进行处理，因此无法获取到该属性的值。

如果需要给<li>标记添加额外的自定义数据，可以考虑使用其他合法的属性或其他HTML元素来实现。例如，可以使用id属性来标识列表项，并通过JavaScript或其他脚本语言来获取id属性的值。

关于O点事件无法获取id的问题，可能是指鼠标点击事件中的鼠标坐标点。对于<li>标记来说，它并没有内置的属性或方法可以直接获取到鼠标点击的坐标点或id。但是可以通过JavaScript等脚本语言来监听鼠标点击事件，并通过事件对象获取到鼠标坐标点，然后再根据具体的业务需求，判断该坐标点对应的<li>标记的id或其他属性。

腾讯云相关产品和产品介绍链接地址：

云服务器（CVM）：https://cloud.tencent.com/product/cvm
云原生容器实例（TKE）：https://cloud.tencent.com/product/tke
云数据库 MySQL版（CDB）：https://cloud.tencent.com/product/cdb
云点播（VOD）：https://cloud.tencent.com/product/vod
人工智能图像识别（AI 图像识别）：https://cloud.tencent.com/product/aiimgrecognition
物联网套件（IoT Explorer）：https://cloud.tencent.com/product/explorer

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

探索 PHP 与 Vue 通用直出模板方案

为什么需要直出？回到开始的问题，为什么需要做页面直出呢？SEO 吗？而为了 SEO 而需要直出的页面有哪些？这些页面是否都是与用户个人状态无关，可以直接缓存的？...> <li class="comic-item" @click="clickComicItem" data-id="c_<?php echo $id; ?...对于服务端渲染的 DOM，只能绑定监听器，无法在绑定属性内直接传参。如：，需要改为：。...事件监听器内读取 e.currentTarget的 data-id 属性，作为点击判断的依据（不过 Vue 不推荐在 HTML 属性内使用 Mustache，如果有更好的方案欢迎提供思路）。 ....> <li class="comic-item" @click="clickComicItem" data-id="c_<?

6K2 0

如何使用 HTML、CSS 和 Vanilla JavaScript 以及本地存储创建待办事项应用程序

在事件侦听器函数中，我们将从用户获取输入值，将其传递给函数addTask()，并将输入值设置为空字符串。...>`; ulElement.innerHTML += html; editTask(); } 正如您所看到的，代表任务的每个 li 元素都有一个作为数据属性值添加的唯一 id ( data-id...最后，我们获取 li 元素的 data 属性值并将其存储在名为的变量中taskId。我们在实现本地存储时会用到这个值编辑任务定义一个名为的函数editTask()。...在这个函数中，我们想要执行与删除按钮相同的步骤：即：获取所有编辑按钮使用forEach()方法迭代并获取最接近的li元素获取 data-id 属性 allTasks使用 id 在数组中查找任务...，对于每个按钮，我们从最近的 li 元素的 data 属性中获取任务 id。

1231 0

前端技术工具类文章

important才能生效，并把forceFallback属性设置成true dataIdAttr dataIdAttr: 'data-id' forceFallback 默认false，忽略HTML5...CoffeeTea WaterMilk <...offsetX、offsetY ：事件属性返回触发事件时鼠标相对于事件源元素的X,Y坐标，标准事件没有对应的属性。...screenX、screenY：事件属性返回当事件被触发时鼠标位置相对于用户屏幕水水平坐标、垂直坐标，此时的参照点也就是原点是屏幕的左上角。...例如，“o{2}”不能匹配“Bob”中的“o”，但是能匹配“food”中的两个o。 {n,} n是一个非负整数。至少匹配n次。

1.2K3 0

vue核心知识点

对于可复用的组件来说，这通常是私有状态 3.接受外部参数(props)：组件之间通过参数来进行数据的传递和共享 4.方法(methods)：对数据的改动操作一般都在组件的方法内进行 5.生命周期钩子函数...v-on可以监听多个方法但是不能监听同一种事件类型否则就会报错...，不要复用它们 vue事件中使用event对象 //html部分 event //js部分 showEvent(event){ // 获取自定义data-id console.log(event.target.dataset.id) //阻止事件冒泡..."todos.length"> {{ todo }} No todos left!

1.9K1 0

LayUI之旅-入门

JS部分 // 配置tab实践在下面无法获取到菜单元素 $('body').on('click',".layui-nav-itemed a", function (...) { var dataid = $(this); //这时会判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目...(url, id, name) { //新增一个Tab项传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值...造成服务器请求次数过多时“小事”，因为事件被重复执行，部分页面功能无法按既定目标完成执行才是“大事”。...这个坑呢，主要是因为官方文档是真的有那么一点点乱，按照正常逻辑，是不是应该先讲怎么使用行内工具条，再讲怎么监听工具条事件吧，而官方文档写的尽然是监听头部工具栏事件（然后在下面写了个具体用法参见：绑定工具条

2.8K2 0

3-进军 angular1.x 模型和作用域 scope

script> 复制代码<h3 class="heading" data-id...$touched}} 复制代码 scope Scope(作用域)... 如何使用使用 ng 创建控制器的时候，你可以将 $scope 当做一个参数传递 $rootScope 全局对象的属性可在所有子作用域中访问，子作用域互相无法访问对方的私有变量，这一点与js的函数作用域完全一致。

1.3K3 0

【融职培训】Web前端学习第10章小程序开发4 小程序开发

一，数据绑定 VUE：vue动态绑定一个变量的变量元素的某个属性的时候，会在变量前面加上冒号：，例：我的title属性绑定了数据小程序：绑定变量的变量元素属性时...= “ example-1” > 2 3 { { 项目。...日志（arg ） 8 } 9 } 10 } ）在小程序中，不能直接在绑定事件的方法中进行参数调整，需要将参数作为属性值，绑定到元素上的数据属性上，然后在方法中，通过e.currentTarget.dataset...*方式获取，从而完成参数的传递。...例如： 1 // 2 页面（{ 3 数据：{ 4 原因

1.3K4 2

树形图拖拽插件tree-drag | 开源项目推荐

广东广州天河区...福田区 ... 陕西商洛洛南

2.3K2 0

Web前端学习第10章小程序开发4 小程序开发

一，数据绑定 VUE：vue动态绑定一个变量的变量元素的某个属性的时候，会在变量前面加上冒号：，例：我的title属性绑定了数据小程序：绑定变量的变量元素属性时...= “ example-1” > 2 3 { { 项目。...日志（arg ） 8 } 9 } 10 } ）在小程序中，不能直接在绑定事件的方法中进行参数调整，需要将参数作为属性值，绑定到元素上的数据属性上，然后在方法中，通过e.currentTarget.dataset...*方式获取，从而完成参数的传递。...例如： 1 // 2 页面（{ 3 数据：{ 4 原因

1.5K4 0

【实战】我是如何在输入框实现@ At功能的

如果您使用id，它就有重复的问题，这就意味着你不可能重用某个元素。例：我再生成一个富文本组件就会初始化失败、因为id是唯一的。这就是为什么很多人推荐尽量少用ID的原因。...要兼容中文输入法的时候@的事件判断(如：中文输入法打“哈哈哈@” 这个时候不能监听@的事件 ) 中文输入法的时候单独输入@的时怎么判断中文输入？...虽然不能做到完全统一但是能做到数据至少是一致的(现在又觉得、textarea、inpu方案的好了) /** * 例富文本： @小明喂三点几拉 @饮茶哥出来饮茶 * 生成数组： * [ * {segment: '@小明 \n', userId: 'idxxxxx...data-id 有ID的 if (item && item.attrs && item.attrs.find(e => e.name === 'data-id')) {

2.5K2 0

1.HTML基础必备知识学习笔记

在以后的程序中，我们一定要注意这一点。...注意: HTML 4.01 对于 id 的值有严格的限制 (例如：在 HTML 4.01 id 值不能以数字开头)。...-- 示例1.下面利用了点击事件和调用了一个js函数 --> Hello World!...示例： li:after { content: 'Data ID :=> ' attr(data-id); position: absolute; top:...data-id="bird">Owl 猫头鹰 Salmon 鲑鱼 Tarantula 毒蜘蛛

1.2K3 0

ajax实现简单的点击左侧菜单，右侧加载不同网页

ajax注意需要在服务器环境下运行，从HBuilder自带的服务器中打开浏览效果即可）图片.png 原理：ajax的局部刷新原理：通过.load()重新加载页面中的某一部分，巧妙的借助data-*的自定义属性来存储数据...，点击的时候修改锚点，因为地址有变，所以刷新的时候仍然会保持当前的页面内容而不是切换到第一个。...class="current" data-id="center">用户中心账户信息...交易记录消息中心 ...(".userMenu").on("click", "li", function() { var sId = $(this).data("id"); //获取data-id

3.4K5 0

你不知道的React 和 Vue 的20个区别【源码层面】

DOM更新，是外部监听处理更新； 3.differcompile 阶段的optimize标记了static 点，可以减少 differ 次数，而且是采用双向遍历方法； 2.React 和 Vue...="app"> itemid:{{item.id}} //转化为...n); 不同点: 1.React 首位是除删除外是固定不动的,然后依次遍历对比; 2.Vue 的compile 阶段的optimize标记了static 点,可以减少 differ 次数,而且是采用双向遍历方法...； 4.reducer:纯函数来处理事件，纯函数指一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用,得到一个新的 state；源码组成: 1.createStore 创建仓库，接受...2.主要就是为了减小副作用，避免影响 state 值，造成错误的渲染； 3.把reducer设计成纯函数，便于调试追踪改变记录； 9.Vuex的mutation和Redux的reducer中为什么不能做异步操作

1.5K3 1

只会Vue怎么开发小程序？Vue和微信小程序的到底有哪些区别?

例：　　　　三、列表渲染我们直接贴代码，两者还是有些相似 vue： <li...nice的一点。...: '#app', methods:{ say(arg){ consloe.log(arg) } } }) 在小程序中，不能直接在绑定事件的方法中传入参数...*的方式获取，从而完成参数的传递，很麻烦有没有...... Page({ data:{ reason

1.7K1 0

【黄啊码】vue和微信小程序的区别

例：三、列表渲染直接贴代码，两者还是有些相似 vue： new Vue({ el: '#app', methods:{ say(arg){ consloe.log(arg) } } }) 在小程序中，不能直接在绑定事件的方法中传入参数...，需要将参数作为属性值，绑定到元素上的data-属性上，然后在方法中，通过e.currentTarget.dataset....*的方式获取，从而完成参数的传递，很麻烦有没有...... Page({ data:{ reason:'' }, toApprove

5112 0

layui treeTable「建议收藏」

('click', click_btn).on('click', click_btn, function () { var tr = o(this).parents('[data-id]'),...]').on('click', '[lay-filter]', function () { var tr = o(this).parents('[data-id]'), id = tr.data...('click', '[lay-event]').on('click', '[lay-event]', function () { var tr = o(this).parents('[data-id...).find('[data-pid=' + pid + ']'), co = o(e.elem).find('[data-id=' + pid + ']'), len = o(e.elem)...).each(function() { var tr = o(this).parents('[data-id]'), id = tr.data('id'), pid = tr.data

1.5K2 0

vue和微信小程序的区别

例：三、列表渲染直接贴代码，两者还是有些相似 vue： <li v-for="item...1.设置值在vue中,只需要再表单元素上加上v-model,然后再绑定data中对应的一个值，当表单元素内容发生变化时，data中对应的值也会相应改变，这是vue非常nice的一点。.../button> new Vue({ el: '#app', methods:{ say(arg){ consloe.log(arg) } } }) 在小程序中，不能直接在绑定事件的方法中传入参数...*的方式获取，从而完成参数的传递，很麻烦有没有...... Page({ data:{ reason:'' }, toApprove

1.3K1 0

前端-vue 和微信小程序的区别、比较

例：三、列表渲染直接贴代码，两者还是有些相似： vue： <li v-for="item...new Vue({ el: '#app', methods:{ say(arg){ consloe.log(arg) } } }) 在小程序中，不能直接在绑定事件的方法中传入参数...*的方式获取，从而完成参数的传递，很麻烦有没有...... Page({ data:{ reason:'' }, toApprove...properties: { // 弹窗标题 currentpage: { // 属性名 type: String, // 类型（必填），目前接受的类型包括

1.5K3 0

第86天：HTML5应用程序标签和智能表单

optimum 这是最大值 value是当前值--> 3、解决CSS3各个浏览器兼容问题需要添加私有前缀 Firefox: -moz- Safari: -webkit- Opera: -o-...1、关键字：（‘data-id’，key）； this是当前点击对象，他有一个dataset属性， dataset是去掉data-之后的值当网页超链接多了之后，将分组标签写data属性，指向分组列表每一项的超链接数据源...--通过DOM存储与DOM对象强相关的数据--> 11 zhangsan 12...zhangsan 13 <li data-id="3" data-age...item.name)); 36 liElement.setAttribute('data-age',item.age); 37 liElement.setAttribute('data-id

8192 0

react中使用swiper

刚刚完成时不一定数据获取完成，数据获取完成以后更新state，此时会触发update周期。...="swiper-slide" data-id="2">Slide 3 Slide 4 Slide 5 Slide 8 Slide 9</div...然而他复制节点的时候，无法复制其onClick的点击事件，这就造成了当swiper初始化完成以后向左滑动第一个和向右滑动到最后一个再滑一次这两个节点是没有点击事件的。

2K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭