event-button:鼠标按钮

本文介绍了如何使用button事件属性来确定触发事件时所点击的鼠标按钮。通过返回不同的整数值,可以区分左键、中键和右键点击,并提供了具体的JavaScript示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

button 返回当事件被触发时,哪个鼠标按钮被点击。

定义和用法

button 事件属性可返回一个整数,指示当事件被触发时哪个鼠标按键被点击。

语法

event.button=0|1|2
参数 描述
0 规定鼠标左键。
1 规定鼠标中键。
2 规定鼠标右键。


$(document).off("mousedown.t").on("mousedown.t", function (e) {
    if(e.button == 0){
        console.log("left")
    }else if(e.button == 1){
        console.log("midden")
    }else if(e.button == 2){
        console.log("right")
    }
});

{{ 'swiper-bundle.min.css' | asset_url | stylesheet_tag }} <style> .featured_video_flex { width: 1200px; margin: 0 auto; display: flex; justify-content: space-around; /* 更改为 "flex-start" */ scroll-padding: 0 20px; /* 添加 padding 避免内容紧贴容器边缘 */ } .featured_video_header { width: 100%; border-bottom: 2px solid #fff; margin-bottom: 20px; } .featured_video_header h2 { text-align: left; margin-bottom: 5px; } .featured_video_flex_video { width: 32%; padding-bottom: 20%; scroll-snap-align: start; /* 设置滚动对齐方式为 "start" */ flex-shrink: 0; /* 禁止内容缩小以适应容器 */ } .mySwiper_zuoy { position: relative; height: 70px; width: 110px; margin: 0 auto 30px; } .swiper-button-prevvideo { position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 40px!important; height: 40px!important; text-align: center; border-radius: 50%; background: #17bbef; background-image: url('https://cdn.shopify.com/s/files/1/0512/8568/8505/files/Icon-3.svg?v=1660122964'); background-repeat: no-repeat; background-position: center center; transition: background-color 0.5s ease; display: block!important; z-index: 999; } .swiper-button-prevvideo:hover{ background: #ccc; background-image: url('https://cdn.shopify.com/s/files/1/0512/8568/8505/files/Icon-3.svg?v=1660122964'); background-repeat: no-repeat; background-position: center center; } .swiper-button-nextvideo { position: absolute; top: 50%; transform: translateY(-50%); right: 0; width: 40px!important; height: 40px!important; display: block!important; text-align: center; border-radius: 50%; background: #17bbef; background-image: url(https://cdn.shopify.com/s/files/1/0512/8568/8505/files/Icon-2.svg?v=1660122964); background-repeat: no-repeat; background-position: center center; transition: background-color 0.5s ease; z-index: 999; } .swiper-button-nextvideo:hover{ background: #ccc; background-image: url('https://cdn.shopify.com/s/files/1/0512/8568/8505/files/Icon-2.svg?v=1660122964'); background-repeat: no-repeat; background-position: center center; } @media (max-width: 1200px) { .featured_video_flex { width: 95%; } } @media (max-width: 768px) { .featured_video_flex { display: flex; overflow-x: auto; /* 将滚动效果更改为自动 */ overflow-x: scroll; /* 添加水平滚动效果 */ scroll-snap-type: x mandatory; /* 设置滚动属性为 "x" 方向和 "mandatory" */ scroll-snap-type: none; /* 取消滚动捕捉效果 */ justify-content: flex-start; } .featured_video_flex_video { width: 100%; padding-bottom: 56.25%; margin-bottom: 30px; } } </style> <div class="featured_video_flex"> {%- if section.settings.title != blank -%} <div class="featured_video_header"> <h2>{{ section.settings.title }}</h2> </div> {%- endif -%} <div class="swiper videomySwiper"> <div class="swiper-wrapper"> {% for block in section.blocks %} <div class="swiper-slide"> {%- if block.settings.video_url == blank -%} <iframe src="//www.youtube.com/embed/_9VUPq3SxOc?rel=0&showinfo=0&vq=720" width="850" height="480" frameborder="0" allowfullscreen ></iframe> {%- else -%} {%- if block.settings.video_url.type == 'youtube' -%} <iframe src="//www.youtube.com/embed/{{ block.settings.video_url.id }}?rel=0&showinfo=0&vq=720" width="850" height="480" frameborder="0" allowfullscreen ></iframe> {%- endif -%} {%- if block.settings.video_url.type == 'vimeo' -%} <iframe src="//player.vimeo.com/video/{{ block.settings.video_url.id }}?color={{ block.color_button | remove: "#" }}&byline=0&portrait=0&badge=0" width="850" height="480" frameborder="0" allowfullscreen ></iframe> {%- endif -%} {%- endif -%} </div> {% endfor %} </div> <div class="swiper-button-nextvideo"></div> <div class="swiper-button-prevvideo"></div> </div> </div> {%- if section.settings.divider -%}</div>{%- endif -%} <script src="{{ 'jquery.min.js' | asset_url }}"></script> <script src="{{ 'swiper-bundle.min.js' | asset_url }}"></script> <script> var swiper = new Swiper('.videomySwiper', { navigation: { nextEl: '.swiper-button-nextvideo', prevEl: '.swiper-button-prevvideo', }, speed: 2000, loop: true, autoplay: { delay: 3000, // 自动切换的时间间隔,单位为毫秒 disableOnInteraction: false, // 用户操作swiper之后是否禁止自动切换 }, spaceBetween: 10, pagination: { el: '.swiper-pagination', clickable: true, }, breakpoints: { 580: { // 当屏幕宽度大于等于320 slidesPerView: 1, spaceBetween: 6 }, 768: { // 当屏幕宽度大于等于768 slidesPerView: 2, spaceBetween: 10 }, 880: { // 当屏幕宽度大于等于768 slidesPerView: 3, spaceBetween: 10 } } }); // 鼠标悬停时停止轮播 swiper.el.addEventListener("mouseenter", function() { swiper.autoplay.stop(); }); // 鼠标离开时重新开始轮播 swiper.el.addEventListener("mouseleave", function() { swiper.autoplay.start(); }); </script> {% schema %} { "name": "视频flex", "class": "index-section", "settings": [ { "type": "text", "id": "title", "label": "t:sections.featured-video.settings.title.label" } ], "blocks": [ { "type": "slide", "name": "添加视频", "settings": [ { "type": "video_url", "id": "video_url", "label": "t:sections.featured-video.settings.video_url.label", "default": "https://www.youtube.com/watch?v=_9VUPq3SxOc", "accept": ["youtube", "vimeo"] } ] } ], "presets": [ { "name": "视频", "blocks": [ { "type": "slide" }, { "type": "slide" }, { "type": "slide" }, { "type": "slide" } ] } ] } {% endschema %}
最新发布
06-12
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值