当前位置: 首页 > Web前端 > HTML

禁止浏览器的title属性的默认效果

时间:2023-04-03 00:41:36 HTML

正好回答了一个问题,浏览器中哪个事件可以禁止浏览器显示title的默认行为?.今天整理一下相关的测试demo。分析问题首先要找关键词,从中找出解决问题的思路。ssrtitledefaultbehaviorseocustomtooltipbehavior解决问题Preventbrowserdefaultbehavior(failed)event.preventDefault()可以用来防止浏览器默认行为,比如onsubmit表单提交,onkeydown键盘输入,页面跳转等。所以可以封号行为被阻止?什么情况下可以屏蔽?因为我们不确定有哪些事件可用,所以我们直接覆盖所有事件。a=document.createElement('a')//eventList存储所有可以触发的事件eventList=[];//通过fori的特性,我们存储所有on开头的事件。for(variina)/^on/.test(i)&&eventList.push(i);//console.log(eventList)//阻止默认事件preventDefaultFun=e=>{e.preventDefault(),console.log(e.type)};//绑定所有事件eventList.forEach(v=>a[v]=preventDefaultFun)//添加内容,附加到DOMTesta.title='www.lilnong.top'a.innerText='WeChat公众号:front-endlinong'document.body.appendChild(a)可以看到title的默认行为还是被触发了,所以通过事件的默认行为失败了。css防止shadowDOM我们可以通过这个实现一些效果,隐藏data:{isShowTitle:true,title:'https://www.lilnong.top'},mounted(){this.isShowTitle=false}实现(悬停效果)mouseenter、mouseleave动态移除和添加title属性。如果觉得绑定事件太复杂,可以使用原生事件委托来完成。实现方案(jquery&native使用selector去掉)$('[title]')和document.querySelectorAll('[title]')可以得到所有有title属性的标签。然后遍历去掉title属性,可以微信公众号:前端linong欢迎大家关注我的公众号。有问题也可以加我的微信前端交流群。