div的范围点击，类似小说的点击中间出现导航栏

最新推荐文章于 2022-03-24 14:23:25 发布

zhenyu-s5

最新推荐文章于 2022-03-24 14:23:25 发布

阅读量254

点赞数

CC 4.0 BY-SA版权

分类专栏：学习文章标签： div点击范围点击 js 小说点击出现导航

本文链接：https://blog.youkuaiyun.com/qq_36022290/article/details/84889721

学习专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种通过计算鼠标点击位置相对于特定元素的百分比坐标来判断点击是否位于预定区域内的方法。此方法适用于触发特定操作，如显示或隐藏元素，通过检查点击位置是否在x轴的25%到75%，y轴的30%到70%之间。代码示例使用了jQuery库来获取元素尺寸和鼠标位置。

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

#想要做什么：点击一个div的中间，或者其他位置触发某个方法...，下方的图片是效果图，第一个是点击消失，第二个是点击出现（按钮旁边的是粒子效果，不是图片乱了哦）。

//点击屏幕中间位置的方法x:25%-75%,y:30%-70%;也可以再修改成带参数的（我的是固定的，不写了...）
getMousePos(event) {
  let e = event || window.event;
  let width=$('#book-read').width();//写成自己的ID
  let height=$('#book-read').height();
  let clientX=e.clientX;
  let clientY=e.clientY;
  var clickCon=0;
  if (parseInt(clientX/width *100)>25 && parseInt(clientX/width *100)<75){
    if (parseInt(clientY/height *100)>30 && parseInt(clientY/height *100)<70){
      //打印点击位置的范围
      console.log(`x:${parseInt(clientX/width *100)},y:${parseInt(clientY/height *100)}`);
      clickCon=1;//满足条件就等于1
    }
  }
  if (clickCon==1){//也能直接把想要触发的方法放到上面满足条件之后，这里我写到了外面
    this.main_log();//如果点击的地方是自己想要的地方就触发某些方法，（这是我自己的方法）
  }
  console.log(clickCon);//看一下是0/1？
},