点击元素, 调用电话和邮箱

最新推荐文章于 2024-09-10 09:55:59 发布

fury_123

最新推荐文章于 2024-09-10 09:55:59 发布

阅读量300

点赞数 7

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/kuang_nu/article/details/140951402

版权

问 (电话):

<li class="hotline">
                    <span><img src="https://file.caixin.com/caixin/help/images/hotline.svg" alt=""></span>
                    <p>热线电话</p>
                    <div class="popup_hotline" style="display: none;">
                        <p>法定节日期间电话客服将暂停</p>
                        <em>400-696-0110</em>
                    </div>
                </li>我希望点击em元素, 让用户去打电话

回答:

对于点击em元素去打电话，你可以这样实现：

// 获取em元素
var emElement = document.querySelector('li.hotline em');

// 添加点击事件监听器
emElement.addEventListener('click', function() {
    var phoneNumber = this.textContent; // 获取电话号码
    // 这里可以使用电话拨号的相关逻辑， 比如
    window.location.href = 'tel:' + phoneNumber;
});

问:

<li class="email">
                    <span><img src="https://file.caixin.com/caixin/help/images/email.svg" alt=""></span>
                    <p>电子邮件</p>
                    <div class="popup_email" style="display: none;">
                        <p>客服邮箱：</p>
                        <em>service@caixin.com</em>
                    </div>
                </li>
这是邮箱元素, 我希望点击em调用邮箱

回答:

// 邮箱
            var emailElement = document.querySelector('.email em'); // 选择 li.email 下的 em 元素
            if (emailElement) {
                emailElement.addEventListener('click', function () {
                    var emailAddress = emailElement.innerText;
                    var subject = ''; // You can set a subject if needed
                    var body = ''; // You can set a body if needed
                    var mailtoLink = 'mailto:' + emailAddress + '?subject=' + encodeURIComponent(subject) + '&body=' + encodeURIComponent(body);
                    window.location.href = mailtoLink;
                });
            }