首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在<a>元素上使用e.preventDefault(),但只允许单击指向外部文档的链接?

在<a>元素上使用e.preventDefault(),但只允许单击指向外部文档的链接,可以通过以下方式实现:

  1. 首先,需要在点击事件的处理函数中使用e.preventDefault()方法来阻止<a>元素的默认行为,即阻止页面跳转。
  2. 接下来,可以通过判断链接的目标地址是否为外部文档来决定是否允许跳转。可以使用以下方法来判断链接是否指向外部文档:
    • 使用正则表达式匹配链接的目标地址,判断是否以"http://"或"https://"开头,这表示链接指向外部文档。
    • 使用JavaScript的URL对象,通过判断链接的协议是否为"http:"或"https:"来确定链接是否指向外部文档。
  • 如果链接指向外部文档,则可以使用JavaScript的window.location.href属性将页面跳转到该链接的目标地址。

以下是一个示例代码:

代码语言:txt
复制
document.querySelector('a').addEventListener('click', function(e) {
  e.preventDefault(); // 阻止<a>元素的默认行为

  var targetUrl = this.href; // 获取链接的目标地址

  // 判断链接是否指向外部文档
  if (targetUrl.match(/^https?:\/\//i) || new URL(targetUrl).protocol.match(/^https?:$/i)) {
    window.location.href = targetUrl; // 跳转到链接的目标地址
  }
});

这样,当点击<a>元素时,如果链接指向外部文档,则会跳转到该链接的目标地址;如果链接指向当前页面或其他内部文档,则不会进行页面跳转。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 腾讯云云服务器(CVM):提供弹性计算能力,满足各类业务需求。详情请参考:腾讯云云服务器(CVM)
  • 腾讯云对象存储(COS):提供安全、稳定、低成本的云端存储服务。详情请参考:腾讯云对象存储(COS)
  • 腾讯云人工智能(AI):提供丰富的人工智能服务,包括图像识别、语音识别、自然语言处理等。详情请参考:腾讯云人工智能(AI)
  • 腾讯云物联网(IoT):提供全面的物联网解决方案,帮助连接和管理物联网设备。详情请参考:腾讯云物联网(IoT)
  • 腾讯云区块链(BCBaaS):提供安全、高效的区块链服务,支持快速搭建和部署区块链网络。详情请参考:腾讯云区块链(BCBaaS)

请注意,以上推荐的腾讯云产品仅供参考,具体选择应根据实际需求进行评估和决策。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端成神之路-WebAPIs03

03 - Web APIs 学习目标: 能够使用removeChild()方法删除节点 能够完成动态生成表格案例 能够使用传统方式和监听方式给元素注册事件 能够说出事件流执行三个阶段 能够事件处理函数中获取事件对象...那么是先执行父元素单击事件,还是先执行div单击事件 ??? ?...常情况下terget 和 this是一致, 但有一种情况不同,那就是事件冒泡时(父子元素有相同事件,单击元素,父元素事件处理函数也会被触发执行), 这时候this指向是父元素,因为它是绑定事件元素对象..., 而target指向是子元素,因为他是触发事件那个具体元素对象。...说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码元素事件中执行。 生活中代理: ? js事件中代理: ?

2.9K20

【HTML5】逐步分析如何实现拖放功能

因此,图像、链接、文本 draggable 属性默认为 true,其余元素 draggable 属性默认为 false 实现拖放功能时有这样两个概念,分别是被拖动元素和目标元素,它们都有各自支持事件...(2)目标元素事件 实现拖放功能过程中,目标元素事件有如下三个 事件 含义 dragenter 被拖放元素进入目标元素时触发 dragover 被拖放元素目标元素内时触发(频繁触发) dragleave...三、dataTransfer对象 上面只是简简单单地实现了拖放功能,并没用利用该功能做出什么实际性功能,这里我们介绍一个拖放事件中事件对象一个特别重要属性——dataTransfer 我们通过...(2)属性 dataTransfer对象 还有两个比较常用属性,如下表所示 属性 含义 dropEffect 被拖放元素放置行为 effectAllowed 目标元素支持放置行为 首先说一下...,这个两个属性需要搭配使用,它们决定了被拖放元素 和 目标元素 之间关系,当设定好两者关系后,进行拖动操作时候,鼠标会根据不同关系显示不同样式,除此之外,没有别的特别的作用。

1.5K10

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

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

2.5K60

事件高级

那么是先执行父元素单击事件,还是先执行div单击事件 ??? 事件流描述是从页面中接收事件顺序。 事件发生时会在元素节点之间按照特定顺序传播,这个传播过程即DOM事件流。...键盘触发事件的话,会得到键盘相关信息,如按了哪个键。 事件对象使用 事件触发发生时就会产生事件对象,并且系统会以实参形式传给事件处理函数。...常情况下terget 和 this是一致, 但有一种情况不同,那就是事件冒泡时(父子元素有相同事件,单击元素,父元素事件处理函数也会被触发执行), 这时候this指向是父元素,因为它是绑定事件元素对象..., 而target指向是子元素,因为他是触发事件那个具体元素对象。    ...说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码元素事件中执行。 生活中代理: ? js事件中代理: ?

1.3K20

事件高级

eventTarget(目标对象),当该对象触发指定事件时,就会执行事件处理函数。...eventTarget(目标对象) ,当该对象触发指定事件时,指定回调函数就会被执行。...常情况下terget 和 this是一致, 但有一种情况不同,那就是事件冒泡时(父子元素有相同事件,单击元素,父元素事件处理函数也会被触发执行), 这时候this指向是父元素,因为它是绑定事件元素对象..., 而target指向是子元素,因为他是触发事件那个具体元素对象。...说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码元素事件中执行。 生活中代理: 咱们班有100个学生,快递员有100个快递, 如果一个个送花费时间较长。

1.5K41

分享 24 个鲜为人知 HTML 属性,助你提升开发效率

今天,我决定再写一个续片,回顾一些我们可能需要使用 HTML 属性。 所有属性都易于设置,并且可以帮助我们完成常见任务,否则我们可以通过使用一些复杂外部库来完成这些任务。...要允许特定媒体类型所有文件,请使用 accept="image/*"。 2、Autofocus 它表明特定元素应该专注于页面加载。... 文档或对话框中只有一个元素能具有 autofocus 属性。如果需要应用于多个元素中,则会将第一个元素设置为焦点。...8、Download 指定当用户单击链接时将下载目标。... 当与 元素一起使用时,它表示机器可读格式日期/时间。 22、Async 确保脚本与页面的其余部分异步执行。

75810

事件高级

eventTarget(目标对象) ,当该对象触 发指定事件时,指定回调函数就会被执行。...常情况下terget 和 this是一致, 但有一种情况不同,那就是事件冒泡时(父子元素有相同事件,单击元素,父元素事件处理函数也会被触发执行),  这时候this指向是父元素,因为它是绑定事件元素对象...,  而target指向是子元素,因为他是触发事件那个具体元素对象。...传统注册方式 a.onclick = function(e) { // 普通浏览器 e.preventDefault(); 方法 e.preventDefault...事件委托也称为事件代理, jQuery 里面称为事件委派。 说白了就是,不给子元素注册事件,给父元素注册事件,把处理代码元素事件中执行。

1.2K10

一些好用jquery技巧

所有你真正需要做800毫秒时间内设置文档主体动画,直到它滚动到文档顶部。 注:小心scrollTop一些错误行为。...5、悬停切换类 假设你希望当用户将鼠标悬停在可点击元素时,它会改变颜色。...这就要在阻止默认动作做文章了: $('a.no-link').click(function (e) { e.preventDefault(); }); 8、淡入/滑动切换 滑动和淡入都是我们用jQuery.../窗口打开外部链接 一个新浏览器tab或窗口中打开外部链接,并确保同一个来源链接能在同一个tab或者窗口中打开: $('a[href^="http"]').attr('target', '_blank...修复时候要小心这个问题。 12、通过文本查找元素 通过使用jQuery中contains() 选择器,你可以找到元素内容文本。

3.9K60

默认行为及阻止

默认行为及阻止 浏览器以及HTML元素提供了一些默认行为,也可以称作默认事件。...默认行为 a标签点击跳转 标签在href存在情况下会点击自动跳转链接或者定位锚点,通过对监听事件阻止默认行为后,点击链接不会跳转。...(); }) input输入 或者获得焦点时敲击键盘会自动输入,阻止默认行为后,敲击键盘将不会输入,可以在这个事件监听下作输入数据过滤,例如只允许输入数字...IE8及之前浏览器阻止默认行为需要使用window.event.returnValue = false。 直接在事件处理函数中return false也能阻止默认行为,只DOM0级模型中有效。...此外,jQuery中使用return false会同时阻止默认行为与事件传播。 示例代码 <!

1.7K30

【如果你要学JS XV】——趣学

导绪我们进行target和this使用中如何区分this指向问题呢?怎么才能阻止冒泡事件?...js中常用鼠标事件和键盘事件,实开发中会遇到很多地方需要用到这些比如mousemove,keydown等,本篇就来了解一下这些吧!...1.e.target与this区别简单来说就是this指向是绑定事件元素,e.target返回是所触发事件元素 // e.target返回是触发事件对象(元素...false;只能用在传统方法,并且它后面的代码不执行3.阻止冒泡事件*为什么要阻止冒泡事件?...事件冒泡:开始时由最具体元素接收,然后逐级向上传播到到DOM最顶层节点。事件冒泡本身特性,会带来部分坏处需要我们灵活使用

76500

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

e.stopPropagation(),IE则是使用e.cancelBubble = true stopPropagation也是事件对象(Event)一个方法,作用是阻止目标元素冒泡事件,但是会不阻止默认行为...如在一个按钮是绑定一个”click”事件,那么”click”事件会依次父级元素中被触发 。stopPropagation就是阻止目标元素事件冒泡到父级元素。...既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。什么元素有默认行为呢?如链接,提交按钮等。...我们都知道,链接默认动作就是跳转到指定页面,下面就以它为例,阻止它跳转: //假定有链接caibaojian.com... = false;      return false;  } 事件注意点 event代表事件状态,例如触发event对象元素、鼠标的位置及状态、按下键等等; event对象只事件发生过程中才有效

2.2K20

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

防止冒泡和捕获 w3c方法是e.stopPropagation(),IE则是使用e.cancelBubble = true stopPropagation也是事件对象(Event)一个方法,用是阻止目标元素冒泡事件...如在一个按钮是绑定一个”click”事件,那么”click”事件会依次父级元素中被触发 。 stopPropagation就是阻止目标元素事件冒泡到父级元素。...既然是说默认行为,当然是元素必须有默认行为才能被取消,如果元素本身就没有默认行为,调用当然就无效了。 什么元素有默认行为呢?如链接,提交按钮等。...我们都知道,链接默认动作就是跳转到指定页面,下面就以它为例,阻止它跳转: //假定有链接 fly63.com<...= false; return false; } 事件注意点 event代表事件状态,例如触发event对象元素、鼠标的位置及状态、按下键等等; event对象只事件发生过程中才有效

5.8K30

【React】786- 探索 React 合成事件

也就是说, React 合成事件中,需要阻止冒泡时,可以使用 e.stopPropagation() 或 e.preventDefault() 方法来解决,另外还可以使用 e.nativeEvent.stopImmediatePropagation...3.1 e.stopPropagation 对于开发者来说,更希望使用 e.stopPropagation() 方法来阻止当前 DOM 事件冒泡,事实,从前两节介绍执行顺序可知,e.stopPropagation...点击菜单外部,执行document事件,关闭菜单。...菜单关闭一刻, document 移除该事件,这样就不会重复执行该事件,浪费性能,也可以 window 注册事件,这样可以避开 document。** 4....因为所有元素事件将无法冒泡到document。通过前面介绍两者事件执行顺序来看,所有的 React 事件都将无法被注册。

1.8K40

javascript 事件基础

三、事件对象 触发DOM某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关信息;包括导致事件元素,事件类型以及其他与特定事件相关信息。...currentTarget就是指被点击那个元素,但是target是当前点击目标元素, 如上代码,由于btn并没有注册事件,结果click事件就冒泡到了document.body,在那里事件才得到了处理...4.事件类型: 4.1鼠标事件:当用户通过鼠标页面操作时触发; click事件:在用户单击鼠标按钮或者按下回车键触发; dblclick事件:在用户双击鼠标按钮时被触发; mouseover...事件:鼠标指针元素外部,用户将移入另一个元素边界时触发,感觉和mouseenter事件类似; mouseout事件:用户将其移入另一个元素内被触发。...mouseenter事件:鼠标光标从元素外部移动到元素范围之内被触发;这个事件不冒泡; mouseleave事件:鼠标光标从元素内部移动到元素范围之外被触发;这个事件不冒泡; mousemove事件

93350
领券