css 前端知识记录

css/文本相关.md

@@ -7,14 +7,19 @@
        2. 溢出隐藏显示省略号
           1. 使用 ` text-overflow `
             css代码
-            ```
+            ```html
 
                 white-space:nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
             ``` 
    2. 多行文本溢出
-         
+         ```style
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          overflow: hidden;
+         ```
    4. 相关知识点
        1. 文本盒子需要设置宽度来限制文本可以存在的位置
        2. 在flex布局中自动撑开内容的盒子进行文本溢出处理 可以给元素的 ` width ` 设置为0来实现

js/dom相关记录.md

@@ -0,0 +1,35 @@
+# js操作dom记录
+## js中操作dom
+## 操作dom问题排除
+### 1. 父元事件被子元素触发
+1. 问题具体描述
+在嵌套式的dom结构中,给父元素绑定事件,会出现子元素也可以触发事件.
+2. 场景还原
+```html
+<div id="parent">
+    <a>这是a</a>
+    <div class="dropdown">
+        
+    </div>
+</div>
+<style>
+    div{
+        width:200px;
+        height:200px;
+    }
+</style>
+```
+3. 问题分析
+可以通过控制台可以看见子元素都赋予了一个mouseout的事件. 
+![问题图片](../img/jsEventBind.png)
+
+4. 解决方法
+监听事件的处理函数中通过 `e.target` 来判定可以由什么`dom`进行触发,此处因为业务问题多加一个`a标签`的判断
+```Javascript
+Element.addEventListener('mouseout',function(e){
+    if(e.target === Element || e.target === Element.quesrySelector('a') ){
+        // 用户事务处理代码
+    }
+})
+
+```