点击触发邮件,移动端触发拨打电话

项目中遇到点击按钮触发邮件和拨号(移动端)的功能, 方法有几种, 目前试了一种a标签的方法,还算管用,若有bug,再更新:
邮件触发
<a href="mailto:name@email.com">Email</a>
参数描述
mailto:name@email.come-mail recipient address
cc=name@email.comcarbon copy e-mail address
bcc=name@email.comblind carbon copy e-mail address
subject=subject texte-mail的题目
body=body texte-mail的内容
?和浏览器地址操作一样,第一个参数符合是?
&其他参数符号是&

 

<a href="mailto:haorooms@126.com
?cc=name2@rapidtables.com
&bcc=name3@rapidtables.com &subject=The%20subject%20of%20the%20email &body=The%20body%20of%20the%20email"> 发送Email 用cc, bcc, 主题和内容</a>

 

拨号触发(移动端),【由于项目AEM 添加meta标签比较复杂,所以没有引用<meta>标签,实际上很多ios和安卓系统,都会自动识别手机号码,点击会询问是否拨号,若要禁止此功能,也可以用meta标签禁止掉。】

<a href="tel:13764567708">移动WEB页面JS一键拨打号码咨询功能</a>

在拨号界面,显示号码,并提示拨打。支持大部分的浏览器,但是在QQ浏览器上支持不好。

 

转载于:https://www.cnblogs.com/laraLee/p/8656065.html

`href` 是 HTML 中 `<a>` 标签(超链接)的核心属性,用于定义链接的目标地址。以下是详细解析: --- ### **核心作用** 1. **指定跳转目标** - 值为 URL(如 `href="https://example.com"`)时,点击链接会跳转到对应页面。 - 值为相对路径(如 `href="/about"`)时,跳转到当前站点的对应路径。 2. **锚点导航** - 值为 `#id`(如 `href="#section2"`)时,跳转到当前页面内指定 ID 的元素位置。 - 值为 `#` 时,跳转到页面顶部(常用于占位链接)。 3. **协议链接** - 可触发特定协议操作,如 `href="mailto:email@example.com"`(打开邮件客户端)或 `href="tel:+123456789"`(拨打电话)。 --- ### **在 Vue/React 中的常见用法** 1. **结合路由使用** 在单页应用(SPA)中,通常用前端路由(如 Vue Router、React Router)替代原生跳转: ```html <!-- Vue Router --> <router-link to="/home">首页</router-link> <!-- React Router --> <Link to="/about">关于</Link> ``` - 直接使用 `href` 会导致页面刷新,破坏 SPA 的无刷新体验。 2. **阻止默认行为** 若需保留 `<a>` 标签的语义但阻止跳转,可通过 JavaScript 控制: ```html <a href="#" @click.prevent="handleClick">点击</a> ``` - `.prevent` 是 Vue 的事件修饰符,等价于原生 JS 的 `event.preventDefault()`。 --- ### **与 `@click` 的关系** - **`href` 优先于 `@click`**: 若同时存在,浏览器默认先执行 `href` 的跳转,可能导致 `@click` 中的逻辑未完成。解决方案: - 使用 `@click.prevent` 阻止默认行为。 - 或改用 `<button>` 标签(无 `href` 属性)。 --- ### **常见问题** 1. **为什么用 `href="#"` 而不是省略 `href`?** - `<a>` 缺少 `href` 会导致: - 失去键盘可访问性(无法通过 Tab 键聚焦)。 - 失去鼠标悬停样式(如 `:hover` 效果)。 - 屏幕阅读器可能无法正确识别为链接。 2. **SEO 影响** - 搜索引擎会抓取 `href` 中的 URL,但忽略 `#` 或 `javascript:` 开头的链接。 3. **安全性** - 避免 `href="javascript:alert(1)"`,可能引发 XSS 攻击。推荐用 `@click` 绑定方法。 --- ### **代码示例对比** | 场景 | 推荐写法 | 不推荐写法 | |--------------------|----------------------------|-------------------------| | SPA 路由跳转 | `<router-link to="/home">` | `<a href="/home">` | | 触发 JS 方法 | `<a href="#" @click.prevent="fn">` | `<a onclick="fn()">` | | 下载文件 | `<a href="/file.pdf" download>` | - | | 邮件联系 | `<a href="mailto:help@example.com">` | - | --- ### **扩展问题** 1. 在 React 中如何阻止 `<a>` 标签的默认跳转行为? 2. `href` 和 `to`(Vue Router)有什么区别? 3. 如何用 CSS 区分 `href="#"` 和真实链接的样式? 4. 移动端开发中,`tel:` 和 `sms:` 协议链接的兼容性如何? 5. 无障碍设计(A11y)对 `href` 有哪些要求? ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值