span的onclick事件无反应

是因为产生了冒泡的原因,只需要在函数里加入禁止冒泡就可以了。
event.stopPropagation();

<span class="glyphicon glyphicon-star collecticon-red" οnclick="attention()"></span>

function attention() {
     event.stopPropagation();
     // code            
}

加入第一句的代码就行了。下面的是实例。



可以使用以下代码实现: HTML代码: ```html <span onclick="showImages()">点击查看图片</span> <div id="imageModal" class="modal"> <span class="close">×</span> <img class="modal-content" id="image"> </div> ``` CSS样式: ```css /* 弹窗样式 */ .modal { display: none; /* 默认隐藏 */ position: fixed; /* 固定定位 */ z-index: 1; /* 设置层级 */ left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /* 添加滚动条 */ background-color: rgb(0,0,0); /* 设置背景颜色 */ background-color: rgba(0,0,0,0.9); /* 设置背景颜色透明度 */ } /* 弹窗内容样式 */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; max-height: 80%; } /* 关闭按钮样式 */ .close { position: absolute; top: 0; right: 0; padding: 15px; color: #fff; font-size: 35px; font-weight: bold; cursor: pointer; } ``` JavaScript代码: ```javascript // 图片数组 var images = ["image1.jpg", "image2.jpg", "image3.jpg"]; // 获取弹窗和图片元素 var modal = document.getElementById("imageModal"); var img = document.getElementById("image"); // 点击事件处理函数 function showImages() { // 显示弹窗 modal.style.display = "block"; // 显示第一张图片 img.src = images[0]; // 当前显示的图片索引 var index = 0; // 点击弹窗以外区域关闭弹窗 modal.onclick = function() { modal.style.display = "none"; }; // 点击图片切换下一张 img.onclick = function() { index++; if (index >= images.length) { index = 0; } img.src = images[index]; }; } ``` 解释: 1. HTML代码中,`span`标签设置了一个`onclick`事件,当用户点击这个元素时,会触发`showImages()`函数。 2. `showImages()`函数中,首先获取弹窗和图片元素,并设置弹窗的显示样式和显示第一张图片。 3. 然后添加了两个事件处理函数:点击弹窗以外区域关闭弹窗和点击图片切换下一张。 4. 最后,将弹窗和图片元素显示出来。 注意:本代码仅做示例,实际应用中可能需要对弹窗样式、图片数组等进行修改。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值