CSS样式 - pointer-events: none[穿透、禁止鼠标事件]

这个输入框就是自定义样式,其中使用了穿透,使中间文字无法被触发。

css样式:

.search-container {
  background-color: #f5f5f5;
  padding: 20rpx 30rpx;
  margin-top: 240rpx; /* Increased margin to match nav-bar height */
}

.search-box {
  background-color: #fff;
  height: 72rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-content {
  position: relative;
  width: 100%;
  height: 100%;
}

.search-background {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.search-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
}

.search-placeholder {
  font-size: 28rpx;
  color: #999;
}

.search-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #333;
  text-align: left;
  background-color: transparent;
}

.search-text {
  color: #999;
  font-size: 28rpx;
}

.category-nav {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20rpx 30rpx;
}

 template代码:

    <!-- 搜索框 -->
    <view class="search-container">
      <view class="search-box">
        <view class="search-content">
          <!-- 底层图标和文字 -->
          <view class="search-background" v-show="!searchText">
            <image src="/static/message/search.svg" class="search-icon"></image>
            <text class="search-placeholder">搜索消息</text>
          </view>
          <!-- 透明输入框 -->
          <input
            class="search-input"
            v-model="searchText"
            placeholder=" "
            @confirm="handleSearch"
          />
        </view>
      </view>
    </view>

 以下是pointer-events介绍:

pointer-events: none;是 CSS 中的一个属性值,用于控制元素对鼠标事件或触摸事件的响应,以下是具体介绍:

作用

设置了pointer-events: none的元素不会成为鼠标事件的目标,鼠标事件会 “穿透” 该元素,就好像该元素不存在一样,不会触发元素的点击、悬停、拖动等事件。

特性

  • 事件冒泡与触发:若父元素设置pointer-events: none,子元素设置为其他值(如auto),点击子元素时,仍会通过事件冒泡触发父元素的事件。
  • 键盘事件不受影响pointer-events: none主要禁用鼠标事件,元素仍可通过键盘操作触发事件,如通过tab键选中元素,再按enter键触发链接。
  • 部分事件仍可能触发pointerenterpointerleave事件,当指针进入或离开元素及其后代时仍会触发,即使父元素设置了pointer-events: none且子元素未设置该属性。

应用场景

  • 禁用交互元素:可以让按钮、链接等暂时不可点击,比如在表单提交时,防止用户重复点击提交按钮,或在加载数据时,禁用相关操作按钮。
  • 创建透明遮罩层:在需要显示遮罩效果,但又不希望遮罩层阻挡下层元素的交互时使用,如提示框、引导层等覆盖在页面上,不影响用户操作下层内容。
  • 优化性能:对于一些不需要响应鼠标事件的元素,设置pointer-events: none,可减少浏览器对鼠标事件的处理,提升性能。
  • 实现特殊效果:如视差滚动效果中,使滚动层无法响应交互,实现粘性效果;或者在元素重叠时,控制鼠标事件的触发对象。

注意事项

  • 兼容性问题:在一些旧版本浏览器中,可能存在兼容性问题,使用时需进行测试。
  • 对可访问性的影响:如果过度使用,可能会影响页面的可访问性,导致一些元素无法通过鼠标操作,要确保不会对用户操作造成困扰。
  • 与 JavaScript 的交互:虽然该属性可禁用鼠标事件,但通过 JavaScript 动态绑定的事件,可能仍会触发,要注意在设置pointer-events: none时,是否会影响 JavaScript 的逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值