



QQ：420220301 微信/手机：150-3210-7690

当前位置：首页 > 工作总结

向轮播图添加点击事件未生效，原因排查？

管理员 2025-11-10

工作总结

158

向轮播图添加点击事件未生效，原因排查？

向轮播图添加点击事件未生效，原因排查？

问题分析：

Swiper 轮播默认会给滑动区域绑定触摸 / 鼠标事件，可能与点击事件冲突，尤其在滑动过程中会阻止点击穿透。
可能存在 CSS 样式（如 pointer-events: none）或其他 JS 代码阻止了 .pcimg/.moimg 的点击事件。

解决方法：

1.禁用 Swiper 的点击阻止：在 Swiper 配置中添加 preventClicks: false 和 preventClicksPropagation: false，允许点击事件穿透到子元素：

javascript
运行
var banSwiper = new Swiper('.banner .swiper-container', {
    effect: 'fade',
    slideActiveClass: 'active',
    autoplay: {
        delay: 5000,
        stopOnLastSlide: false,
        disableOnInteraction: false,
    },
    speed: 1200,
    pagination: {
        el: '.banner .swiper-pagination',
        clickable: true,
        renderBullet: function (index, className) {
            return '<span class="' + className + '"> <div class="wrapper_con right">\n' +
                '            <div class="circleProgress rightcircle"></div>\n' +
                '        </div>\n' +
                '        <div class="wrapper_con left">\n' +
                '            <div class="circleProgress leftcircle"></div>\n' +
                '        </div><div class="f-14">' + '0' + (index + 1) + '</div></span>';
        },
    },
    // 新增：允许子元素点击事件
    preventClicks: false, // 不禁用子元素的点击事件
    preventClicksPropagation: false // 不阻止事件冒泡});

2 检查 CSS 样式：确保 .pcimg/.moimg 或父元素没有设置 pointer-events: none（会禁用点击），若有则删除。

希望以上内容对你有所帮助！如果还有其他问题，请随时提问。各类知识收集拥有多年CMS企业建站经验，对 iCMS， LeCMS， ClassCMS， Fastadmin， PbootCMS， PHPCMS，易优CMS， YzmCMS，讯睿CMS，极致CMS， Wordpress， HkCMS， YznCMS， WellCMS， ThinkCMF，等各类cms的相互转化，程序开发，网站制作，bug修复，程序杀毒，插件定制都可以提供最佳解决方案。

未经允许不得转载：Str Tom工作室 » 向轮播图添加点击事件未生效，原因排查？

相关推荐