为 某个元素添加了子元素后，子元素的位置在父元素的外面不显示问题

最新推荐文章于 2021-06-03 16:24:31 发布
最新推荐文章于 2021-06-03 16:24:31 发布
阅读量2.4k 收藏
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/MelodyFreedom/article/details/75491951
本文介绍了解决在CSS布局中删除按钮部分显示在外的问题。通过将按钮的父元素overflow属性设置为visible，实现了按钮完整显示的效果。

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

1 在项目中做控件的时候，遇到了做的元素需要删除的时候，右上角出现个删除按钮，按钮一半在空间外部显示，这个时候，对控件，也就是删除按钮的父元素添加overflow:visible;

就可以正常显示了。

<div id="8" class="move  InputBoxS" style="cursor: move; border-width: 1px; border-style: dashed; border-top-color: rgb(51, 153, 102); border-right-color: initial; border-bottom-color: rgb(51, 153, 102); border-left-color: initial; border-image: initial; background-color: rgba(0, 0, 0, 0); border-radius: 0px; width: 76px; height: 23px; top: 95px; left: 263px; opacity: 1; z-index: 3; display: block; font-size: 11pt;overflow:visible" customerbaseinfo="{&quot;isdisplayicon&quot;:&quot;0&quot;}" microsoft=""><span id="spans-8">请输入文字</span><div id="666yy" onclick="LayoutManager.menuDelete()" class="rsize" style="left: -25px; top:-15px; z-index: 80002;height:30px;width:40px;background:url(img/iconAll.svg) no-repeat  -578px -120px ;vertical-align:middle;display:inline-block;"></div></div>

MelodyFreedom
关注
子控件在父控件上的显示问题
ismilesky的博客
09-15 2412
创建了子控件,在父控件上或窗口上看不到: 1. 当前控件没有添加到父控件中 2. 当前控件的hidden = YES 3. 当前控件的alpha <= 0.01 4. 没有设置尺寸（frame.size、bounds.size） 5. 位置不对（当前控件显示到窗口以外的区域） 6. 背景色是clearColor 7. 当前控件被其他可见的控件挡住了 8. 当前控件是个显示图片的控件（没有设置图片\图
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
10-18
在jQuery中，`$("#id").parent()` 方法返回指定元素的直接父元素。如果想要获取更远的祖先元素，可以使用 `$("#id").parents()` 方法，它会返回指定元素所有的祖先元素，直到文档的根元素。如果需要精确获取最近的一...
CSS让子容器超出父元素(子容器悬浮在父容器效果)
01-19
前言 有时候，我们需要如下图这样一个悬浮效果需求： 实现 在标准的正常的情况下，只能使用 绝对定位 来完成。 第一步：父容器定位设置为 relative（相对定位）。 第二步：子容器定位设置为 absolute（绝对定位）。 <div id=a> <div id=b>我要浮出去！</div> </div> #a{ width:400px; height:100px; background:rgb(0, 0, 0); position:relative;/*父元素>相对定位*/ } #b{ width: 150px; height:50px;
子绝父相，父元素清除浮动，导致子元素显示不全
weixin_34185560的博客
06-07 547
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box1{ width: 200px; height:...
一个子控件在父控件上不显示的几个大概原因
xingyunzhishen7543的博客
09-16 526
当一个个子控件不能显示的时候:    a 看是否设置了frame或者子控件frame的范围超出了父控件    b 看子控件是否添加到了父控件（tableCell和headerView     需要添加到self.contentView）    c 看子控件的alpha值是否为1  hidden属性    d 看子控件的颜色是否和父控件的相同而显示不出来    e 若是headerVie
css清除浮动的几种方法_清除浮动的几种方法
weixin_39849287的博客
11-24 130
标准流：盒子会各占整行位置。子盒子若是标准流，父盒子虽然没有高度，但是会撑开父盒子高度。浮动：盒子浮了起来，不会占据原来的位置，若父盒子没有定义高度，则不会撑开父盒子，父盒 子高度为0。(浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒子不会被撑开)。为什么要清除浮动呢？清除浮动的本质是什么？　　清除浮动主要是为了解决父级元素因为子级浮动引起...
CSS子元素选择器使用介绍
09-25
CSS子元素选择器是用于选取特定父元素的直接子元素的一种CSS选择器。在CSS中，选择器是用于选择HTML文档中元素的规则，它们可以定义应用于特定元素的样式规则。当我们谈论子元素选择器时，它与后代选择器有着明显的...
jquery子元素过滤选择器使用示例
10-27
其中，子元素过滤选择器尤其在需要对特定子元素进行操作时，显得非常实用。本文将详细介绍jQuery中子元素过滤选择器的使用方法，包括如何通过特定的语法选择页面中的特定子元素，并添加相应的样式或行为。 首先，...
使用jquery选择器如何获取父级元素、同级元素、子元素
10-25
以下代码将为所有在`<p>`元素之后的同级元素添加一个类： ```javascript var p_nex = $("p").nextAll(); p_nex.addClass('p_next_all'); ``` 3. `andSelf()`：此方法包含当前元素在`nextAll()`或`prevAll()`的结果...
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
10-28
在网页开发过程中，有时我们需要对DOM元素进行处理，特别是当元素内部无内容或者不包含特定子元素时。jQuery提供了一种高效的方式来实现这样的判断。本文将详细介绍如何使用jQuery来检查一个元素是否有内容或包含...
子元素的margin-top出现在父元素之外的问题及解决
weixin_42349568的博客
07-05 1627
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .outer{ width: 100px; height: 100px; background: blue
table居中显示_「CSS三种居中方案全解」CSS垂直居中常用方法集结
weixin_39806388的博客
12-10 529
一、CSS 垂直居中1、父元素display:table-cell;vertical-align:center，里面的子元素就会实现垂直居中，不需要知道子元素的宽高/* HTML */ .father {display: table-cell;vertical-align: middle;width: 300px;height: 300px;border: 3px solid red; } ...
父元素设置overflow，绝对定位的子元素会被隐藏或一起滚动
weixin_30586085的博客
10-29 2515
一般情况： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="...
float子元素超出父元素解决办法
gabby____的博客
11-05 5060
使用float 子元素浮动，如果子元素比父元素大，会撑开父元素 此时在父元素上加上 overflow:hidden  
当设置父元素overflow: hidden；子元素超出父元素时没有隐藏
热门推荐
_陌默
01-09 1万+
<div class="box"> <img src="http://img1.imgtn.bdimg.com/it/u=2335896061,645089826&fm=214&gp=0.jpg" alt=""> </div> 当我将img标签设置为position:absolute; 设置父元素 .box{ ...
html怎么把子列表隐藏,css – 如果父级是overflow,如何使子元素可见？隐藏？
weixin_36030121的博客
06-03 1015
我有一个带有溢出的子元素：visible;并且父元素与overflow：hidden ;.子元素的高度高于父元素。如果属性溢出设置为可见，为什么子元素被隐藏？HTML：CSS：#container {width: 500px;height: 100px;border: 1px solid black;background: Gray;/*OVERFLOW*/overflow: hidden;}#m...
（CSS学习记录）：浮动(float)
baidu_41388533的博客
09-27 459
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26 浮动(float) CSS 布局的三种机制 网页布局的核心——就是用 CSS 来摆放盒子。 CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中： 普通流（标准流） 块级元素会独占一行，从上向下顺序排列； 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、t..
子div无法被父div包裹的解决方法
灰来飞去的奇幻小屋
11-30 2901
昨天在制作网页过程中，遇到了这样一个bug：父div无法包裹子div，导致通过父div设置的css样式还需要在子div里设置一遍，具体情况如图： 底部版权栏并未被包裹在父div里，导致父div的css样式不能获取。 .wrapper { width: 1000px; margin: 30px auto 80px auto; background: #dedad3; -webk...
绝对定位z-index失效，元素在父元素外消失解决方案
qq27229639的博客
12-16 4333
开发时遇到如下情况： div元素设置为绝对定位，当right设置为负值时，超出父元素的部分消失。 解决思路： 通过元素选择器可看到，元素实际已定位到想要的位置，原以为是由于不同路由限制不同元素view层重叠，后观察跟父元素属性相关，父元素设置了高度并且有overflow:auto属性（hidden也会有此现象），导致其子元素被隐藏。 解决方法： 找到父元素，移除overflow属性，可以解决。 ...
vue3 点击父元素 不触发子元素
最新发布
03-28
<think>嗯，用户的问题是关于在Vue3中如何点击父元素时阻止子元素事件的触发。首先，我需要回忆一下Vue中事件处理的相关知识，特别是事件修饰符和事件传播机制。 根据提供的引用资料，Vue中处理父子元素事件冲突通常使用事件修饰符，比如`.stop`和`.prevent`。例如，在子元素上使用`@click.stop`可以阻止事件冒泡到父元素。但用户的情况相反，是要在点击父元素时阻止子元素的事件触发。这时候可能需要反过来考虑事件的处理顺序。 通常，事件会从子元素冒泡到父元素。如果用户在父元素上触发事件时，子元素的事件已经触发了，可能需要阻止事件捕获阶段或者使用其他方法。不过，Vue的事件修饰符主要处理的是事件冒泡阶段。这时候可能需要使用`.capture`修饰符来在捕获阶段处理事件，从而在父元素的事件处理函数中阻止事件继续传递到子元素。 另外，用户可能需要检查是否子元素的事件处理没有正确阻止冒泡，导致父元素的事件触发。例如，如果父元素有一个点击事件，而子元素的事件没有使用`.stop`修饰符，点击子元素时会同时触发子元素和父元素的事件。但用户的问题相反，是点击父元素时不希望触发子元素的事件，这可能涉及到事件委托或者父元素覆盖子元素的情况。 可能需要通过CSS或JavaScript来阻止子元素的事件监听。例如，当点击父元素时，动态禁用子元素的事件处理。不过，这在Vue中可能需要使用`event.target`来判断点击的目标元素是否是父元素本身，而不是其子元素。如果点击的是父元素区域，但子元素覆盖了父元素，可能需要检查事件的目标是否是父元素，如果是，则执行父元素的事件处理，否则忽略。 或者，可以在父元素的事件处理函数中检查事件的目标元素，如果目标元素是父元素本身，才执行相应的操作，否则阻止默认行为或停止传播。例如： ```html <div @click="handleParentClick"> <div @click="handleChildClick">子元素</div> </div> ``` 在`handleParentClick`方法中，判断`event.target`是否是父元素： ```javascript methods: { handleParentClick(event) { if (event.target === this.$el) { // 执行父元素的逻辑 } } } ``` 这样可以确保只有当点击的是父元素本身时，才会触发父元素的事件处理函数，而点击子元素时则不会触发父元素的逻辑。同时，子元素的事件仍然会正常触发。 另外，可能需要使用`.self`修饰符，使得只有事件目标元素自身触发时才调用处理函数。例如： ```html <div @click.self="handleParentClick"> <div @click="handleChildClick">子元素</div> </div> ``` 这样，只有当点击的是父元素本身时，才会触发`handleParentClick`，而点击子元素时，父元素的事件不会被触发，因为`.self`修饰符会检查事件的目标元素是否是绑定事件的元素本身。 结合引用中的内容，特别是引用[1]提到使用事件修饰符，比如`.stop`，但这里需要的是父元素的事件不影响子元素，或者反过来。用户的需求是点击父元素时不触发子元素的事件，可能需要通过阻止事件传递或者在父元素的事件处理中阻止子元素的事件触发。 例如，在父元素上使用`@click`，并在其处理函数中使用`event.stopPropagation()`，但这可能反而阻止子元素的事件。或者，使用事件捕获阶段来处理，在父元素上使用`.capture`修饰符，在捕获阶段处理事件，然后停止传播，这样后续的子元素事件就不会触发了。 总结可能的解决方案： 1. 使用`.self`修饰符在父元素的点击事件上，确保只有点击父元素本身才触发。 2. 在父元素的事件处理函数中检查`event.target`是否是父元素本身，如果是才执行逻辑。 3. 使用事件捕获阶段，在父元素上捕获事件并停止传播，防止子元素接收到事件。 4. 动态控制子元素的事件绑定，例如在父元素被点击时禁用子元素的事件，但这种方法可能比较复杂。 根据Vue3的语法，使用`.self`修饰符可能是最简洁的方式。例如： ```html <div @click.self="handleParentClick"> <div @click="handleChildClick">子元素</div> </div> ``` 这样，当用户点击父元素区域（非子元素部分）时，父元素的事件才会触发，而点击子元素时，父元素的事件不会触发，同时子元素的事件正常触发。这符合用户希望点击父元素时不触发子元素事件的需求，但实际上用户的需求可能需要反过来，即点击父元素时，子元素的事件不被触发。这时候可能需要更深入的考虑。 如果用户的意思是，当点击父元素时，即使点击的位置有子元素覆盖，也不触发子元素的事件，而是只触发父元素的事件，那么需要阻止子元素的事件被触发。此时，可能需要使用`pointer-events: none`在子元素上，当父元素被点击时，动态设置子元素的样式，使其不响应点击事件。例如： 在父元素被点击时，给子元素添加一个类，该类设置`pointer-events: none`，然后在处理完父元素的事件后，再移除该类。但这种方法可能不够实时，或者需要复杂的逻辑。 或者，在父元素的事件处理中使用`event.stopPropagation()`，但这通常用于阻止事件冒泡，而这里可能需要阻止事件捕获或默认行为。 可能需要更仔细地分析事件流。例如，当点击子元素时，事件会先经过捕获阶段，到达目标元素（子元素），然后冒泡回父元素。如果父元素在捕获阶段处理事件并停止传播，那么子元素的事件将不会触发。例如： ```html <div @click.capture.stop="handleParentClick"> <div @click="handleChildClick">子元素</div> </div> ``` 这样，当点击子元素时，父元素的`handleParentClick`会在捕获阶段触发，并且由于`.stop`修饰符，事件传播被停止，子元素的`handleChildClick`不会触发。但是，如果点击父元素本身，同样会触发`handleParentClick`，并且阻止事件传播，但此时可能没有问题。不过这可能不符合用户需求，因为用户希望点击父元素时阻止子元素的事件，但此时点击父元素的话，可能子元素并没有被点击，所以这个问题的场景可能需要明确。 可能用户的问题场景是，父元素包含子元素，当用户点击父元素区域时，无论是否点击到子元素，都希望只触发父元素的事件，而不触发子元素的事件。此时，可以在父元素的事件处理中使用`event.stopPropagation()`，并且在捕获阶段处理，从而阻止子元素的事件触发。例如： ```html <div @click.capture="handleParentCapture"> <div @click="handleChildClick">子元素</div> </div> ``` 在方法中： ```javascript handleParentCapture(event) { event.stopPropagation(); // 父元素的处理逻辑 } ``` 这样，在捕获阶段，父元素的事件处理函数会先执行，并停止传播，导致子元素的点击事件不会被触发。无论用户点击的是父元素还是子元素，父元素的事件都会触发，而子元素的事件被阻止。但这样可能不符合需求，因为用户可能希望父元素点击时不影响子元素的事件，或者仅在父元素点击时阻止子元素的事件。可能需要更明确的逻辑。 或许用户的需求是，当点击父元素时，执行父元素的事件处理，并且阻止子元素的事件触发。例如，父元素有一个按钮，点击父元素区域时触发某个动作，但子元素内部有按钮或其他交互元素，当点击父元素区域时，不希望子元素的点击事件被触发。这种情况可能需要阻止事件传播到子元素，或者在父元素的事件处理中阻止子元素的事件。 但根据事件传播机制，父元素的事件处理在冒泡阶段是在子元素之后触发的，所以如果在父元素的事件处理中阻止传播，可能不会影响子元素的事件，因为子元素的事件已经触发了。所以正确的做法可能是在捕获阶段处理父元素的事件，并停止传播，这样在事件到达子元素之前就被阻止了，从而子元素的事件不会被触发。 因此，在Vue3中，可以使用`.capture`修饰符来在捕获阶段处理父元素的事件，并调用`stopPropagation`： ```html <div @click.capture="handleParentClick"> <div @click="handleChildClick">子元素</div> </div> ``` ```javascript methods: { handleParentClick(event) { event.stopPropagation(); // 父元素的逻辑 } } ``` 这样，当点击子元素时，事件在捕获阶段被父元素处理，并停止传播，子元素的点击事件不会被触发。而点击父元素本身时，事件同样在捕获阶段被处理，父元素的逻辑执行，但由于没有子元素被点击，所以不会有其他影响。这可能符合用户的需求。 但是，用户的问题可能更具体，例如当点击父元素时，子元素的事件被触发，而用户希望阻止这种情况。这可能是因为子元素覆盖了父元素，所以点击父元素实际上点击的是子元素。这时候，可能需要检查事件的目标元素是否是父元素本身，而不是子元素。 例如，在父元素的事件处理中： ```javascript handleParentClick(event) { if (event.target === event.currentTarget) { // 只有当点击的是父元素本身时执行 // 执行父元素的逻辑 } } ``` 在Vue中，`event.currentTarget`指向绑定事件的元素，即父元素，而`event.target`是实际点击的元素。如果两者相同，说明点击的是父元素本身，而不是其子元素。这样，只有当点击父元素的空白区域时，父元素的事件才会触发，而点击子元素时不会触发父元素的事件。但用户的需求是点击父元素时阻止子元素的事件，这可能并不适用，因为此时点击子元素时父元素的事件不会被触发。 可能需要重新理解用户的问题。用户可能希望的是，当点击父元素区域（包括子元素覆盖的部分）时，触发父元素的事件，但不触发子元素的事件。例如，父元素有一个背景点击事件，而子元素是一个按钮，但用户希望点击按钮时，父元素的事件触发，而按钮本身的事件不触发。这种情况下，可以在父元素的事件处理中阻止子元素的事件。 这种情况下，使用事件捕获阶段并在父元素处理时停止传播，可以阻止子元素的事件触发。例如： ```html <div @click.capture="parentClick"> <div @click="childClick">子元素</div> </div> ``` 在`parentClick`方法中： ```javascript parentClick(event) { event.stopPropagation(); // 父元素逻辑 } ``` 这样，当点击子元素时，事件在捕获阶段到达父元素，父元素处理事件并停止传播，子元素的点击事件不会被触发。而点击父元素的其他区域时，同样会触发父元素的事件，并且没有子元素的事件被触发。这可能符合用户的需求。 但是，这样处理的话，无论用户点击父元素的任何地方，子元素的事件都不会触发。这可能不是用户想要的，因为用户可能希望子元素在正常情况下可以触发事件，只有在父元素被点击时才阻止子元素的事件。不过，根据用户的问题描述，可能他们确实希望父元素点击时，子元素的事件被阻止，不管点击的位置是否是子元素。或者，可能用户希望的是，当父元素被点击时，即使点击的是子元素区域，也仅触发父元素的事件，而子元素的事件不被触发。 总结可能的解决方案： 1. 使用事件捕获和`stopPropagation`来阻止子元素事件的触发。 2. 使用`.self`修饰符，使得父元素的事件仅在点击自身时触发，不影响子元素。 3. 在父元素事件处理中检查`event.target`，仅当点击的是父元素时才执行逻辑。 根据用户的具体需求，正确的解决方案可能有所不同。根据提供的引用资料，使用事件修饰符是推荐的方法。例如，引用[1]提到使用事件修饰符解决子元素点击触发父元素事件的问题，即使用`.stop`阻止冒泡。但用户的问题相反，需要阻止子元素的事件当父元素被点击时触发。这时候可能需要父元素在捕获阶段处理事件并停止传播，从而阻止子元素的事件触发。 因此，最终的解决方案可能是在父元素上使用`.capture`修饰符和`.stop`修饰符，或者在事件处理函数中调用`stopPropagation`，从而在事件到达子元素之前停止传播。</think>在Vue3中解决父元素点击触发子元素事件的问题，可以通过以下两种方法实现： --- ### 方法一：使用`.self`修饰符 通过`.self`修饰符限制父元素**仅当点击自身时**触发事件（排除子元素的冒泡触发）： ```html <!-- 父元素添加.self修饰符 --> <div @click.self="handleParentClick"> <div @click="handleChildClick">子元素</div> </div> ``` 此时： - 点击父元素**非子区域** → 触发`handleParentClick` - 点击子元素 → 仅触发`handleChildClick`（父元素事件被过滤）[^1] --- ### 方法二：通过`event.target`判断事件源 在父元素事件中判断**点击目标是否为自身**，排除子元素触发： ```javascript const handleParentClick = (event) => { if (event.target === event.currentTarget) { // 仅当点击父元素本身时执行逻辑 console.log('父元素被点击'); } }; ``` ```html <div @click="handleParentClick"> <div @click="handleChildClick">子元素</div> </div> ``` --- ### 方法三：事件捕获阶段拦截（强制控制） 通过`.capture`修饰符在**捕获阶段拦截事件**并阻止传播： ```html <div @click.capture.stop="handleParentClick"> <div @click="handleChildClick">子元素</div> </div> ``` 此方法会**完全阻止子元素事件触发**，适用于需要强制控制事件流的场景[^1][^5]。 --- ### 对比总结 | 方法 | 特点 | 适用场景 | |-------------|-----------------------------------|-----------------------| | `.self` | 简单声明式，自动过滤子元素冒泡 | 父子事件需独立触发 | | `event.target` | 灵活判断事件源，手动控制逻辑 | 需要动态处理复杂交互 | | 捕获拦截 | 强制阻断所有子元素事件 | 父事件优先级绝对高于子 | ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值