前端项目解决双击文字元素导致页面出现选中情况的问题可以通过CSS样式来实现

前端项目解决双击文字元素导致页面出现选中情况的问题可以通过CSS样式来实现

/* 在全局样式或者你的组件样式中添加以下样式 */
.disable-selection {
    -webkit-user-select: none; /* Chrome/Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    user-select: none; /* Standard */
}

以vue2 项目举例

<template>
  <div @dblclick="handleDoubleClick" class="disable-selection">
    <!-- 这里是你的文字元素 -->
  </div>
</template>

<script>
export default {
  methods: {
    handleDoubleClick() {
      // 双击事件处理逻辑
    }
  }
}
</script>

<style scoped>
/* 其他样式 */
</style>
posted @ 2024-04-19 09:31  fruge365  阅读(19)  评论(0)    收藏  举报  来源