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

原创已于 2025-01-16 14:47:25 修改 · 746 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css #计算机外设 #前端

于 2025-01-16 14:45:42 首次发布

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

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键触发链接。
部分事件仍可能触发：pointerenter和pointerleave事件，当指针进入或离开元素及其后代时仍会触发，即使父元素设置了pointer-events: none且子元素未设置该属性。

应用场景

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

注意事项

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