首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

防止点击事件影响父jquery

点击事件可以影响父元素的宽高,可以通过给子元素添加事件监听器,在点击子元素时修改父元素的宽高来实现。

代码语言:javascript
复制
$(document).ready(function(){
  $(".child").on("click", function(){
    // 获取父元素的宽高
    var parentWidth = $(this).parent().width();
    var parentHeight = $(this).parent().height();

    // 定义变量存储子元素的宽高
    var childWidth = $(this).width();
    var childHeight = $(this).height();

    // 计算点击事件相对于父元素的位置,并设置父元素的宽高
    var positionX = $(this).position().left;
    var positionY = $(this).position().top;
    var parentPos = $(this).parent().position();
    var parentLeft = parentPos.left;
    var parentTop = parentPos.top;

    if (positionX < parentLeft) {
      // 如果点击位置在左侧,则将父元素向左移动,并改变宽度
      $(this).parent().css("left", positionX + "px").css("width", parentWidth - positionX + "px");
    } else {
      // 如果点击位置在右侧,则将父元素向右移动,并改变宽度
      $(this).parent().css("left", parentLeft + "px").css("width", parentWidth + positionX - parentLeft + "px");
    }

    if (positionY < parentTop) {
      // 如果点击位置在顶部,则将父元素向上移动,并改变高度
      $(this).parent().css("top", positionY + "px").css("height", parentHeight - positionY + "px");
    } else {
      // 如果点击位置在底部,则将父元素向下移动,并改变高度
      $(this).parent().css("top", parentTop + "px").css("height", parentHeight + positionY - parentTop + "px");
    }
  });
});

这个代码段通过获取点击事件相对于父元素的位置,并根据位置计算出需要改变父元素的宽高,最后使用CSS的left和width属性来实现。当然,也可以使用jQuery的animate方法来动态修改元素的宽高。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的合辑

领券