开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么<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。

1281 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

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

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

2.4K2 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

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

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.6K2 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

5122 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

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.6K2 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

vue - v-model实现自定义样式の多选与单选

说干就干，我直接在原来项目代码的基础上动手：之前的选项处理就一个li孤军奋战，数据渲染、样式切换、包括点击事件都绑定在上边， 1 ul.qus-list 2 li(v-for="(item,index...这里可以看出，二者是相互成就的关系：首先通过html那里，label的for属性和input的id属性关联，使得点击label的时候，input也就被选择上了。...而这一篇的实现方式正是还算巧妙的利用了该用的知识点。也就不再需要li身上绑定的哪个choose事件来监听用户点击了。代码自己给我们做了！...") h3.zhanshi 您的选择是：{{picked}} //- 题目表单 form.question div h3.qus-title(:data-id...item.Description}} h3.zhanshi 您的多选选择是：{{pickedBox}} form.question div h3.qus-title(:data-id

2.1K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭