整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
者/sherry
最近在做项目的过程中遇到一个非常奇葩的bug，在h5页面点击一个按钮弹出弹窗，但是这个弹窗刚出现就会自动消失，导致屏幕出现闪动现象，关键这个bug还是偶现的。
经过一番研究才发现是vue事件点击穿透引起的，而且弹窗一定要在300ms内出现才会引发这个bug，接下来分析具体原因：
vue框架内置指令v-on:click有300ms的延迟响应，这是为了判断区分单击和双击。vue为移动端提供了触摸方法touchstart、touchmove、touchend，但却没有提供tap指令，因此需要自己手动定义v-tap去消除300ms延迟，提升移动端用户体验。
自定义v-tap指令：
Vue.directive('tap',{
bind:function(el,binding){
var startTx, startTy,endTx,endTy,longClick,timeOutEvent,
longMethod=binding.value.longMethod,
method=binding.value.method,
params=binding.value.params,
propagation=binding.value.propagation;
el.addEventListener("touchstart",function(e){
var touch=e.touches[0];
startTx=touch.clientX;
startTy=touch.clientY;
if(longMethod && typeof longMethod==='function'){
longClick=0;
timeOutEvent=setTimeout(function(){
longClick=1;
longMethod(e, params)
},500)
}
if(!propagation){
if (e.stopImmediatePropagation) {
e.stopImmediatePropagation();
} else {
e.propagationStopped=true;
}
}
},false );
el.addEventListener("touchmove",function(e){
if(longMethod && timeOutEvent){
clearTimeout(timeOutEvent);
timeOutEvent=0;
}
},false);
el.addEventListener("touchend",function(e){
var touch=e.changedTouches[0];
endTx=touch.clientX;
endTy=touch.clientY;
if(longMethod && timeOutEvent){
clearTimeout(timeOutEvent);
}
if((timeOutEvent!=0 && longClick==0)||!longMethod){
if( Math.abs(startTx - endTx) < 6 && Math.abs(startTy - endTy) < 6){
if(params instanceof Array){
method(...params);
}
else method(params);
}
var focusInput=document.querySelector('input:focus');
if(focusInput)focusInput.blur();
var tagName=el.tagName.toLowerCase();
if(tagName==='input'||tagName==='textarea')el.focus();//获取焦点
if(!propagation){
if (e.stopImmediatePropagation) {
e.stopImmediatePropagation();
} else {
e.propagationStopped=true;
}
e.stopPropagation();
return false;
}
}
},false);
}
})
看似tap事件完美解决了移动端延迟响应的问题，但是它却有个致命的缺点：touch之后300ms会触发click。
回到我上面提到的那个bug，因为我给按钮绑定的是tap事件，而弹窗是click。当我点击按钮弹出弹窗后，刚好在屏幕相同的位置触发了弹窗的click事件，因此弹窗消失。而且一定要在300ms内发生，如果弹窗出现时间较长，大于300ms，则不会出现这个问题，这也就是为什么那个bug是偶现的。
bug隐藏得够深啊，过了好久才想明白。
1，v-on:click和v-tap不要混用
还是拿上面那个例子来说明。如果页面里面的元素是v-tap，弹窗是v-on:click则可能出现页面闪动；反之有可能穿透弹窗，引发页面按钮的点击。因为这个时候弹窗消失了，touch300ms后引发的click事件会作用在屏幕相同位置的按钮上。
2，阻止单击事件继续传播
v-on:click.stop
event.stopPropagation() 。 // 对click和touch都适用，但是防不住touch300ms后引发click
3，css中的pointer-events
这个属性确切地说不是用来阻止vue事件点击穿透，而是精确地控制点击事件的响应元素
pointer-events的值有两个：auto / none，auto是默认值，none表明该元素不响应点击事件，该事件继续往下传递
既然本文主要围绕h5页面和弹窗的点击穿透事件讲解，那我顺便分享个滑动穿透的解决技巧。
当h5页面内容较多，一屏展示不下时，在y方向是可以滑动的。这时候如果弹出弹窗，弹窗本身是不可滑动的，但是滑动弹窗，会引发弹窗下面H5页面的滑动。我之前的解决办法是用watch方法，监视弹窗的弹出状态动态设置h5页面的style属性：overflow-y 为auto或者hidden。
后来发现还有更优雅的解决办法，只需要防止弹窗的滑动穿透即可：@touchmove.prevent=""
<div class="right-description" v-show="showPop" @click="closeRightPop" @touchmove.prevent=""> <img src="../../assets/coupon/refund_tip_img.png"/> </div>
作为一名开发，写出来的代码不仅要满足产品基本需求，还要更优雅简单才好。H5进阶之路还很漫长，共勉…
家好，我是 Echa。
今天来分享 50 个超实用的 Chrome 浏览器扩展！
JSON Viewer Pro 用于可视化JSON文件。其核心功能包括：
输入界面如下：
格式化之后：
JSONVue 是一个JSON数据查看器，主要用来格式化JSON数据：
Library Sniffer 是一款给开发者使用的工具，能够探测当前网页所使用的类库、框架和服务器环境，为开发者提供了方便。
Wappalyzer 扩展可以用来识别网站背后的底层技术。通过此扩展，可以了解特定应用程序是否是用 React、Vue、Angular、PHP等编写的。还可以访问有关 Web 服务器、编程语言、框架、内容管理系统、分析的信息工具、数据库等。
WhatRuns 扩展程序只需单击一下即可找到任何网站上使用的技术。
使用PerfectPixel插件可以将设计图加载至网页中，与已成型的网页进行重叠对比，以帮助开发和设计人员规范网页像素精度。这是一款可以优化前端页面显示的Chrome插件。
可以使用此扩展程序快速清除缓存，无需任何确认对话框、弹出窗口等。可以在选项页面上自定义要清除的数据和数量，包括：应用程序缓存、缓存、Cookie、下载、文件系统、表单数据、历史记录、索引数据库、本地存储、插件数据、密码和 WebSQL。
VisBug 是一个使用 JavaScript 构建的开源网页设计调试工具，它可以让用户使用点击式和拖放式界面来查看网站的元素。
Debug CSS 是一个帮助调试CSS的插件。他可以显示出页面元素的轮播，按住Ctrl，并将鼠标悬浮在元素上，即可查看其信息：
CSS Viewer 是一款适用于 Web 开发人员的高效 Chrome 扩展。顾名思义，CSS 查看器可以显示将鼠标悬停在任何网页上的元素的 CSS 属性。
EditThisCookie 是一个 cookie 管理器。可以添加，删除，编辑，搜索，锁定和屏蔽cookies。
React Developer Tools 是开源 JavaScript 库 React 的 Chrome DevTools 扩展。它允许我们在 Chrome 开发者工具中检查 React 组件层次结构。安装此插件之后，将在 Chrome DevTools 中获得两个新选项卡："?? Components" 和 "?? Profiler"：
Vue.js devtools 是一款基于chrome浏览器的用于调试Vue.js应用程序的插件，可以使得开发人员大大提高调试效率。支持用户对DOM结构数据结构进行解析和调试功能。
Augury 可以帮助开发人员在 Google Chrome 浏览器中调试和分析 Angular 应用程序。
Firebug Lite是火狐浏览器中著名的开发者工具firebug插件移植到Chrome中的插件，在Chrome中安装了Firebug Lite插件以后，开发人员可以像在火狐浏览器中使用firebug一样熟悉的方式来调试网页内容，其包含了基本的HTML、CSS以及Javascript的调试功能，用于帮助网页前端开发工程师快速地调试网页，以便及时地找到网页中的BUG并及时修复。
HTML Validator 在 Chrome 的开发者工具中添加了 HTML Validator。HTML 页面的错误数通过浏览器状态栏中的图标显示，详细信息可以在浏览器的开发者工具中查看。
Web Developer 扩展为带有各种 Web 开发工具的浏览器添加了一个工具栏按钮。该扩展适用于 Chrome 和 Firefox，并且可以在这些浏览器支持的任何平台上运行，包括 Windows、macOS 和 Linux。
Requestly 是一款Chrome和Firefox浏览器插件，提供URL转发、修改HTTP请求和结果、插入脚本等功能。
Window Resizer 主要用来调整浏览器窗口的大小以模拟各种屏幕分辨率。
Responsive Viewer 是在一个视图中显示多个屏幕的 Chrome 扩展程序。该扩展将帮助前端开发人员在开发响应式网站/应用程序时测试多个屏幕。
此插件允许直接从浏览器发送跨域请求，而不会收到跨域错误。可以使用此插件覆盖 Request Origin 标头，并将 Access-Control-Allow-Origin 设置为 *.
ColorPick Eyedropper 是一个放大的吸管和颜色选择器工具，可让从网页等中选择颜色值。
CSS Peeper 用于检查和复制元素样式的优秀工具，使用 CSSPeeper 可以将鼠标悬停在网页中的任何元素上，然后单击鼠标即可复制元素的样式。
24. Dimensions
Dimensions是一款能帮助使用者对网页上各种元素属性之间的距离进行测量的Chrome页面元素测量插件，该插件在点击启动插件图标后，可以对页面中图像、输入字段、按钮以及视频等页面元素之间上下左右的方位尺寸进行测量，同时还可以通过使用快捷键来快速启用或关闭该插件的功能，简单实用。
Site Palette 用于生成调色板。设计师和前端开发人员必备的工具。可以通过这款插件轻松获取网站的配色方案。
ColorZilla 是一款功能强大地提取网页色彩的工具；也是个快速的对颜色进行调节的Chrome插件，许多的用户将这款软件称呼为颜色吸取插件，它提取的颜色是非常的多样化，还可生产css颜色的代码等。
当我们想查看网页中文字的字体时，最常用的方法就是在控制台查看文字的字体样式。那还有没有更简单的方法呢？WhatFont 就是一个查看网页字体的Chrome扩展。只需要的点击扩展图标，再点需要查看为文字即可：
Fonts Ninja 可以从任何网站识别字体、添加书签、试用并购买它们。
使用 BrowserStack 快速启动扩展在任何浏览器中启动一个新的测试会话。最多可设置 12 个浏览器以实现快速访问并最大限度地减少切换浏览器所花费的时间。
Toby 是一款 Chrome 新标签页工具，能够将未读的标签页分组显示在新标签页中，这样就能把所有未看完的标签页都关闭了。分组相当于多个 Chrome 窗口，将你的标签页都拖进 Toby 中，就不需要实时开着占地方了。
该扩展提供了每日热门开发者新闻，不需要再浪费时间搜索高质量的文章了。
Momentum 拥有漂亮的新标签页面，每日更新精彩背景壁纸图片，可设置每日新鲜事焦点以及跟踪待办事项，无广告，无弹窗。
The Great Suspender 是一个轻量级的扩展用来减少 Chrome 的内存占用。如果同时打开许多选项卡，在可配置的时间之后未查看的选项卡将在后台自动挂起，从而释放该选项卡消耗的内存和 CPU。
Session Buddy是一个可以帮助用户查看、新增、编辑当前网站Session状态的Chrome插件。用户可以利用该插件保存网站当前的状态以便在关闭Chrome或关闭计算机后恢复，从而达到节省内存的作用。
Octotree 旨在让 GitHub 体验更好。通常，为了检查 Github 中的子文件夹，需要手动单击文件夹并导航。Octotree 扩展解决了这个问题。此扩展在项目的左侧显示存储库的目录结构，这有助于更好地理解文件夹结构。
1_EKF88oqIyX6FzgueCKdtXg.gif
File Icons for GitHub and GitLab 可以将 GitHub 和 GitLab 上的原始文件图标替换为特定文件类型的图标。
ax DevTools 是一个快速、轻量级但功能强大的测试工具，由 Deque 开发的世界上最值得信赖的可访问性测试引擎 axe-core 驱动。使用 ax DevTools 在网站开发过程中查找并修复更多可访问性问题。
OctoLinker 可以将特定语言的语句（如 include、require 或 import）转换为链接。当打开一个包含多个导入语句的文件并且想要快速打开它时，只需将鼠标悬停在链接的文件上并单击即可打开。
此扩展可帮助 Web 开发人员分析网页是否违反最佳实践。
Check My Links 是一个链接检查器，它可以抓取网页并查找损坏的链接。
Checkbot 是用于验证一组HTML页面上的链接的工具。Checkbot可以检查一个或多个服务器上的单个文档或一组文档。它会创建一个报告，该报告汇总了引起某种警告或错误的所有链接。
Google Page Speed Insighs 是一款旨在优化所有设备上的网页、提高网页加载速度的工具。
META SEO inspector是一款可以帮助用户分析网页的meta信息并得到SEO评估的谷歌浏览器插件。
Ghostery 是强大的隐私保护扩展程序。其主要有以下功能：
AdBlock 用来在YouTube、Facebook、Twitch和其他你喜爱的网站上拦截广告和弹窗。
番茄工作法（Pomodoro?）时间管理助理。? 长短两种休息时间 ? 带有倒计时显示的工具栏图标 ? 追踪Pomodoro历史和统计讯息 ? 可配置的长休间隔 ? 可配置的定时器时长 ? 桌面与新标签页通知 ? 超过20种音效可选的声音通知 ? 计时器秒针走动音效
Loom 可以用来快速录制视频，并且能够将录制的视频上传到指定的网页中，Loom还支持在用户点击启动插件时，立即捕捉屏幕图像，同时开始视频录制操作，还可以将录制好的视频复制到粘贴板中存储。
GoFullPage 是一款全屏截图插件（整个网页截图），完整捕获您当前页面的屏幕，进行滚动截图，而无需任何额外的权限。单击扩展程序图标，然后将其传输到屏幕快照的新标签页中，可以在其中将其下载为图像或PDF，甚至只需拖动即可，保存到桌面。
BetterViewer 可以提供更好的图像查看体验，旨在替代基于 Chrome 浏览器中内置的图像查看模式。使用时，只需在页面右键点击图片，选择“在新标签页中打开图片”即可。
svg-grabber 是一个快速预览并从网站获取所有 svg 的工具。可以用来预览、下载和复制网站中所有 SVG 图标和插图的代码。
在HTML中,Id属性是一个非常重要的元素,它可以为网页上的每个元素提供一个独特的标识符。通过Id属性,您可以精准地定位和操作特定的HTML元素,从而实现更细致的样式控制和交互功能。本文将为您揭示Id属性的魔力,教您如何利用它来打造出与众不同的网页体验。
Id属性的值必须在整个HTML文档中是唯一的,这使它成为定位和操作特定元素的理想选择。通常情况下,我们会为页面中的重要元素如页头、导航栏、主内容区域等分别设置Id。
<header id="header">
<nav id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</header>
<main id="main">
<section id="hero">
<h1>欢迎来到我的网站</h1>
<p>这里是网站的主要内容区域</p>
</section>
</main>
有了Id属性,您可以在CSS中直接针对特定元素进行样式定制。这种精准的选择器使您能够更好地控制网页的视觉效果。
#header {
background-color: #333;
color: #fff;
padding: 20px;
}
#nav ul {
list-style-type: none;
display: flex;
}
#nav li a {
color: #fff;
text-decoration: none;
padding: 10px 20px;
}
#hero {
background-color: #f2f2f2;
padding: 50px;
text-align: center;
}
除了CSS,Id属性在JavaScript中也扮演着重要的角色。通过Id,您可以快速地获取和操作特定的HTML元素,实现各种交互效果。
<button id="myButton">点击我</button>
const button=document.getElementById('myButton');
button.addEventListener('click', ()=> {
alert('您点击了按钮!');
});
在使用Id属性时,有几个需要注意的最佳实践:
总之,HTML Id属性是一个非常强大的工具,它可以为网页元素提供独特的标识,从而帮助您实现精细化的样式控制和交互功能。只要掌握好它的用法,相信您一定能打造出令人惊叹的网页作品。
生成关于html中OnClick的头条爆款文章
好的,我为您生成了一篇关于HTML中onClick事件的头条爆款文章,以下是完整内容:
在HTML中,onClick事件是一种非常强大的交互功能,它可以让您的网页元素在用户点击时执行各种自定义的操作。无论是弹出提示框、切换样式还是触发复杂的交互效果,onClick事件都能轻松搞定。本文将为您揭示onClick事件的魔力,教您如何利用它打造出引人入胜的网页体验。
onClick事件最常见的应用就是为按钮添加点击响应。当用户点击按钮时,就会触发预先定义好的JavaScript代码,从而实现所需的功能。
<button onclick="showMessage()">点击我</button>
function showMessage() {
alert('您点击了按钮!');
}
除了按钮,您还可以为其他HTML元素如链接、图片等添加onClick事件,让整个网页变得生动有趣。
onClick事件的真正威力在于它能与JavaScript无缝结合,实现各种复杂的交互效果。您可以利用JavaScript操作DOM,动态地改变元素的样式、内容甚至触发其他事件。
<div id="box" class="box">这是一个盒子</div>
<button onclick="toggleBox()">切换盒子</button>
function toggleBox() {
const box=document.getElementById('box');
box.classList.toggle('active');
}
在这个例子中,当用户点击按钮时,JavaScript会切换盒子元素的样式类,从而实现显示/隐藏的交互效果。
除了基本的交互,onClick事件还可以用于触发更复杂的功能,如表单提交、数据请求、动画效果等。您可以将onClick事件与其他事件监听器、API调用等技术相结合,打造出令人惊叩的网页体验。
<form onsubmit="submitForm(event)">
<input type="text" id="name" placeholder="请输入您的名字" />
<button type="submit">提交</button>
</form>
function submitForm(event) {
event.preventDefault(); // 阻止表单默认提交行为
const nameInput=document.getElementById('name');
const name=nameInput.value;
// 执行表单提交的其他逻辑
console.log(`您的名字是: ${name}`);
}
在使用onClick事件时,有几个需要注意的最佳实践:
总之,HTML onClick事件是一个非常强大的交互工具,它可以让您的网页元素焕发生机,变得更加生动有趣。
*请认真填写需求信息，我们会在24小时内与您取得联系。
