如果没有jQuery，则不会加载e.preventDefault()之后的链接

如果没有jQuery，则不会加载e.preventDefault()之后的链接。

jQuery是一个流行的JavaScript库，它简化了JavaScript编程，并提供了许多方便的功能和方法。其中之一是e.preventDefault()方法，用于阻止默认的事件行为，例如在点击链接时阻止浏览器跳转到链接的URL。

如果没有使用jQuery，那么在点击链接时，浏览器会按照默认的行为进行处理，即跳转到链接的URL。而如果使用了jQuery，并调用了e.preventDefault()方法，就可以阻止默认的跳转行为，从而可以在点击链接时执行自定义的操作，而不是跳转到链接的URL。

需要注意的是，e.preventDefault()方法只能在事件处理函数中使用，它必须与事件对象一起使用。事件对象（通常表示为e）包含了与事件相关的信息，例如触发事件的元素、事件类型等。

总结起来，如果没有jQuery，并且没有调用e.preventDefault()方法，点击链接时会按照默认行为跳转到链接的URL。而如果使用了jQuery，并调用了e.preventDefault()方法，就可以阻止默认的跳转行为，从而可以执行自定义的操作。

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

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云数据库 MySQL 版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iot
移动开发（移动推送、移动分析、移动测试等）：https://cloud.tencent.com/product/mobile
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（Tencent XR）：https://cloud.tencent.com/product/xr

相关·内容

一些好用的jquery技巧

2、预加载图像如果你的网页要使用大量开始不可见的（例如，悬停的）图像，那么可以预加载这些图像： $.preloadImages = function () { for (var i = 0; i <...hasClass('broken-image')) { $(this).prop('src', 'img/broken.png').addClass('broken-image'); } }); 即使没有任何断掉的链接...，不过disabled 的值要设置为false： $('input[type="submit"]').prop('disabled', false); 7、停止加载链接有时候，你既不需要链接到某个特定的网页...如果你只是想在用户点击之后展示一个元素的话，那么用fadeIn 和slideDown 方法就很完美。...如果没有定义处理程序，其他的jQuery代码或会就此罢工。

3.9K6 0

阻止a标签的默认事件及延伸

看如下实例： (1)把单击事件处理程序注册到一个锚元素，而不是一个外层的上，那么就要面对另外一个问题：当用户单击链接时，浏览器会加载一个新页面。...(2)当用户在编辑完表单后按下回车键时，会触发表单的submit事件，在此事件发生后，表单提交才会真正发生。这种行为与我们讨论的事件处理程序不是同一个概念，它是单击标签元素的默认操作。...如果我们不希望执行这种默认操作，那么在事件对象上调用.stopPropagation()方法也无济于事，因为默认操作不是在正常的事件传播流中发生的。...既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接，提交按钮等。...当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。

2.5K6 0

前端开发者都应知道的 jQuery 小技巧

一个简单技巧的集合，帮你提升 jQuery 技能。 Matt Smith 发起的一个小项目，目前已有 15 个小技巧。伯乐在线会持续跟进更新。...回到顶部按钮预加载图片检查图片是否加载完毕自动修复损坏的图片 Hover 上的 Class 开关禁用 input 字段停止链接加载淡入淡出/滑动开关简单的折叠效果将两个 Div 设为相同高度...自动修复损坏的图片如果你发现自己网站的图片链接挂了，一个一个替换很麻烦。...这段简单的代码可以帮上大忙： $('img').on('error', function () { $(this).prop('src', 'img/broken.png'); }); 即使你没有任何损坏的链接...; } }); Ajax 调用的错误处理当某次 Ajax 调用返回 404 或 500 错误，就会执行错误处理。但如果没有定义该处理，其他 jQuery 代码或许会停止工作。

2.3K3 0

pjax使用小结

pjax 结合 pushState 和 ajax 技术，不需要重新加载整个页面就能从服务器加载 Html 到你当前页面，这个 ajax 请求会有永久链接、title 并支持浏览器的回退/前进按钮。...实际的效果见： http://pjax.herokuapp.com 没有勾选 pjax 的时候点击链接是跳转的，勾选了之后链接都是变成了 ajax 刷新（实际效果如下图的请求内容对比）。...优化页面跳转体验常规页面跳转需要重新加载画面上的内容，会有明显的闪烁，而且往往和跳转前的页面没有连贯性，用户体验不是很好。如果再遇上页面比较庞大、网速又不是很好的情况，用户体验就更加雪上加霜了。...不过pjax会进行判断，功能不适用的时候会执行默认的页面跳转操作。...options pjax 开始 pjax:beforeReplace contents, options 内容替换渲染前触发，如果缓存了要导航页面的内容则使用缓存，否则使用 pjax 加载 pjax:end

2.9K4 0

JavaScript停止冒泡和阻止浏览器默认行为

e.stopPropagation()，IE则是使用e.cancelBubble = true stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为...如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发。stopPropagation就是阻止目标元素的事件冒泡到父级元素。...既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接，提交按钮等。...当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。...我们都知道，链接的默认动作就是跳转到指定页面，下面就以它为例，阻止它的跳转： //假定有链接caibaojian.com

2.2K2 0

JavaScript阻止冒泡和取消默认事件(默认行为)

，但是会不阻止默认行为。...如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发。 stopPropagation就是阻止目标元素的事件冒泡到父级元素。...既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接，提交按钮等。...当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。...我们都知道，链接的默认动作就是跳转到指定页面，下面就以它为例，阻止它的跳转： //假定有链接 fly63.com<

6K3 0

轮播图swiper框架的基本使用

Swiper 的特色功能不依赖公共库 Swiper无需加载任何公共库（如jquery）即可运行，这保证了Swiper的轻量和运行速度。...Swiper也可以在加载了公共库的环境下安全的运行，如jQuery, Zepto, jQuery Mobile等支持流行的前端框架从Swiper6版本开始提供了流行前端框架的支持，可以将swiper...作为组件添加到这些框架中方便使用，如React，Svelte，Vue.js，Angular等下载英文网址中文网址这里演示中文的下载过程点击获取swiper 下载本地的压缩包或者获取cdn在线链接...我们选择网页的在线演示，可以查看一些现成的效果，上面标志着数字，选中一款效果后，解压下载的swiper压缩包之后点进去选择demo文件夹，里面是一些效果的演示文件，选择对应数字的html文件，我们可以直接使用这些现成的效果...querySelector(".append-slide") .addEventListener("click", function (e) { e.preventDefault

1.3K5 0

html5鼠标拖动排序及resize实现方案分析及实践

之前一般会使用jQuery-UI。其通过mousedown、mousemove、mouseup这三个事件来实现页面元素被鼠标拖拽的效果。...相比之前用jquery-UI等库实现，更加方便（省去计坐标计算等）。...e.preventDefault(); 如果drop接收盒子要想接收到元素，那么接收的拖动元素 dragenter和dragover必须阻止默认行为。...如果effectAllowed属性是定为none,则不允许拖放元素 dropEffect 表示拖放操作的视觉效果，如果dropEffect 属性设定为none,则不允许被拖放到目标元素中。...这种思路之前也介绍过，如《懒加载优化：JavaScript IntersectionObserver API监听元素是否可见》。

3.1K1 0

drag事件详解：html5鼠标拖动排序及resize实现方案分析及实践

图片和链接按住鼠标左键选中，就可以拖放。文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true，按住鼠标左键也可以直接拖放。...e.preventDefault();如果drop接收盒子要想接收到元素，那么接收的拖动元素 dragenter和dragover必须阻止默认行为。...如果要实现dragover中访问dragstart中设置的数据，可以采用定义一个全局变量的方法，在dragstart中赋值，之后在dragend中清空。...另外，我在ondragover时，尝试给被拖拽元素添加class以改变其样式发现，虽然拖拽时class已经改变，但在拖拽过程中样式并没有改变，而是等到拖拽动作完成后，也就是drop之后样式才被应用上去，...如果effectAllowed属性是定为none,则不允许拖放元素dropEffect 表示拖放操作的视觉效果（作用于目标元素），如果dropEffect 属性设定为none,则不允许被拖放到目标元素中

6.3K2 1

js拖拽上传图片

jquery的ajax请求。...这里我们就要先说说在 http 中传输文件的问题。起初http协议中没有上传文件方面的功能，直到rfc1867为http协议添加了这个功能。...请求头的不同，对于上传文件的请求，contentType = multipart/form-data是必须的，而 post 则不是，毕竟 post 又不是只上传文件～。...这里的不同也就是指前者在发送的每个字段内容之间必须要使用分界符来隔开，比如文件的内容和文本的内容就需要分隔开，不然服务器就没有办法正常的解析文件，而后者 post 当然就没有分界符直接以 name =...而在我的这段JQuery ajax() 方法中，我设置了contentType = false,这不是冲突了吗？这当然没有，因为当我们查看这时的 Request headers，会发现还是有分界符。

18.2K3 0

每个程序员都会的 35 个 jQuery 小技巧

预加载图片如果你的页面中使用了很多不可见的图片（如：hover 显示），你可能需要预加载它们： $.preloadImages = function () { for (var i = 0; i...自动修改破损图像如果你碰巧在你的网站上发现了破碎的图像链接，你可以用一个不易被替换的图像来代替它们。...添加这个简单的代码可以节省很多麻烦： $('img').on('error', function () { $(this).prop('src', 'img/broken.png'); }); 即使你的网站没有破碎的图像链接...，添加这段代码也没有任何害处。...并把要移除的属性作为参数传入： $('input[type="submit"]').removeAttr('disabled'); 阻止链接加载有时你不希望链接到某个页面或者重新加载它，你可能希望它来做一些其他事情或者触发一些其他脚本

4.4K1 0

默认行为及阻止

默认行为 a标签点击跳转标签在href存在的情况下会点击自动跳转链接或者定位锚点，通过对的监听事件阻止默认行为后，点击链接不会跳转。...("t1").addEventListener("click", (e) => { e.preventDefault(); }) 鼠标右击显示菜单在浏览器页面中鼠标右击会显示菜单...(); }) input输入在或者获得焦点时敲击键盘会自动输入，阻止默认行为后，敲击键盘将不会输入，可以在这个事件监听下作输入数据过滤，例如只允许输入数字...(); }) 阻止默认行为 W3C推荐的阻止默认行为的方式是event.preventDefault()，此方法只会阻止默认行为而不会阻止事件的传播。...此外，在jQuery中使用return false会同时阻止默认行为与事件传播。示例代码 <!

1.7K3 0

JS的面试题（一）

创建了一个空对象将函数中的this指向这个对象空对象的__proto__指向函数的prototype 返回这个对象 7.对象访问属性的过程先访问自身，如果没有则通过__proto__指向...call第二个参数之后传序列，立即执行 apple第二个参数是数组，立即执行 bind第二个参数之后是传序列，不立即执行 27 jQuery中，dom加载完之后执行，如何实现？...加载json数据 .ajax() 全能除了ajax，还包含jsonp 46、什么情况下会产生跨域？...方法执行完毕之后返回jquery对象 50、ajax实现的步骤？...0.建立xhr对象，未调用open 1.建立了链接未发送数据，未调用send 2.发送数据，但数据未解析 3.服务器开始解析数据 4.数据解析完成，前端可以获取解析之后的数据 52、ajax的状态码200

1131 0

使用requirejs编写模块化代码

而requirejs的诞生便是为了解决这个问题。 requirejs 在官网把requirejs 下载回来之后。...(所有模块的查找根路径)，paths(名称映射)，shim( 为那些没有使用define()来声明依赖关系、设置模块的”浏览器全局变量注入”型脚本做依赖和导出配置。)..., ‘jquery’, ‘AMUI’, ‘mapController’, ‘city’, ‘commuteGo’]；第二个参数为回调函数，当前面指定的模块都全部加载成功之后，便调用此函数。...加载的模块会以参数形式传入此函数，从而在回调函数内部就可以使用这些模块啦。...require()异步加载所需模块的时候，此时浏览器并不会失去响应；当前面的模块加载成功之后，执行回调函数才会运行我们的逻辑代码，因此解决了依赖性问题。讲完了模块加载，我们下面讲一下模块编写。

1K5 0

webview中用到的Javascript 博客分类： Javascript JavaScriptjsonwebkitjQuery框架

以前在博文中提到过，在 webview 中使用 jQuery 等框架，很影响网页加载速度，所以我都是使用纯 Javascript 来写页面脚本。... 在所有节点 clone 结束之后，需要隐藏这个桩节点。...其他的克隆出来的节点 id 也是 line ，没有改变， webkit 下， firstChild 获取的节点是 textNode ，所以需要进行一些判断，来确定这个桩节点。...Scroll.moved) {//没有滚动的时候，不执行move操作 var rx = Scroll.ix - e.touches[0].clientX; var ry = Scroll.iy...- e.touches[0].clientY; if(rx>-10 && rx -10 && ry<10) return;//移动范围小于10*10，则认为没有滚动

4711 0

程序员都会的 35 个 jQuery 小技巧

列高度相同如果使用了两个CSS列，使用此种方式可以是两列的高度相同。...12.预加载图片如果你的页面中使用了很多不可见的图片（如：hover 显示），你可能需要预加载它们： $.preloadImages = function () { for (var i = ...14.自动修改破损图像如果你碰巧在你的网站上发现了破碎的图像链接，你可以用一个不易被替换的图像来代替它们。...即使你的网站没有破碎的图像链接，添加这段代码也没有任何害处。...，并把要移除的属性作为参数传入： $('input[type="submit"]').removeAttr('disabled'); 17.阻止链接加载有时你不希望链接到某个页面或者重新加载它

2.6K0 0

jquery 获取所有的标签

，jQuery会获取所有的标签，然后将所有标签名称展示在页面上中。...示例代码：获取所有的标签并添加点击事件在以下示例中，我们将获取页面中所有的标签（即超链接标签）并为其添加一个点击事件，当用户点击某个超链接时，页面将弹出该超链接的地址。...(); // 阻止默认行为 var link = $(this).attr('href'); // 获取超链接地址 alert('您点击的链接地址是...：' + link); }); }); 在上面的示例中，页面加载完成后，jQuery会选取所有的标签，并为其添加一个点击事件...当用户点击任何一个超链接时，页面会弹出一个提示框，显示该超链接的地址。

1021 0

从零开始学 Web 之 HTML5（四）拖拽接口，Web存储，自定义播放器

ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/ e.preventDefault(); } /*浏览器默认会阻止ondrop事件：我们必须在ondragover...document.ondragover=function(e){ /*如果想触发ondrop事件，那么就必须在这个位置阻止浏览器的默认行为*/ e.preventDefault...事件，那么就必须在这个位置阻止浏览器的默认行为*/ e.preventDefault(); }; /*浏览器默认会阻止ondrop事件：我们必须在ondragover中阻止浏览器的默认行为...注意：jQuery中没有提供对视频播放控件的方式，所以如果使用jQuery操作元素，必须将其转为原生 js 的方式来调用这些方法。...--已经加载的--> <!

1.5K2 0

petite-vue源码剖析-事件绑定`v-on`的工作原理

在书写petite-vue和Vue最舒服的莫过于通过@click绑定事件，而且在移除元素时框架会帮我们自动解除绑定。省去了过去通过jQuery的累赘。...modifiers: Record) => void | boolean > = { stop: e => e.stopPropagation(), prevent: e => e.preventDefault...(hyphenate((e as KeyboardEvent).key) in modifiers)) { /* 如果为键盘事件，键不在没有在modifiers中指定则不执行事件回调函数...，若返回true则不执行事件回调函数 const guard = modiferGuards[key] if (guard && guard(e, modifiers))...{ return } return raw(e) } } } // 居然没有返回cleanup函数？？

4182 0

通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

前言关于讲解 JS 的拖拽功能的文章数不胜数，我确实没有必要大费周章再写一篇重复的文章来吸引眼球。本文的重点是讲解如何在某些特定的元素上禁止拖拽。...这是我在编写插件时遇到的问题，其实很多插件的拖拽功能并没有处理这些细节，经过翻阅 jquery ui 的源码才找到答案。...，比如可以指定整个 modal 为拖拽元素 draggable('#modal','#modal'); 拖拽问题整个拖拽功能并没有太大的问题，但是如果我们拖拽关闭按钮，仍然可以拖拽整个 modal，看起来不太和谐而且在某些情况下会影响功能...排除特定元素的方法关于如何排除特定元素的方法，很多人会推荐阻止冒泡的方法，但是我试了很多次，这种方法是不行的，因为拖拽事件绑定在了 document 对象上。...总结其实这个拖拽案例算是 jquery ui 拖拽功能的简单实现。

4.8K9 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云