JS 踩坑

最新推荐文章于 2021-08-30 11:18:47 发布

原创最新推荐文章于 2021-08-30 11:18:47 发布 · 474 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

22 篇文章

订阅专栏

博客介绍了e和this的区别，e.target.value获取接受事件元素输入或选择的值，this指向当前事件绑定元素；还分享了局部打印事件的思路和实现方法；最后介绍了overflow的属性，如auto、scroll、visible、hidden、inherit等不同取值的效果。

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

e和this的区别

（今天在尝试antd插件使用的时候尝试了这个问题，算踩坑了吧。。。）

1.e.target.value获取的就是你选择接受事件的元素输入的或者选择的值。

参数e接收事件对象。

而事件对象也有很多属性和方法，其中target属性是获取触发事件对象的目标，也就是绑定事件的元素，e.target表示该DOM元素，然后在获取其相应的属性值。

2. this就是指向当前事件所绑定的元素。

3.e.target.value和this的区别：

1.先弄清楚e.target指向哪个元素，然后看看这个元素的value属性的值就可以得到了。初学者一般会把e.target和this弄混，搞不懂这两个具体指向哪个元素。

简单来说，this就是指向当前事件所绑定的元素，而e.target指向事件执行时鼠标所点击区域的那个元素。容易搞不懂的地方是，初学者会认为当前事件所绑定的元素不就是鼠标所点击的那个元素嘛，这时候就要看看事件绑定的元素内部有没有子元素了，如果有子元素的话e.target指向这个子元素，如果没有，e.target和this都指向事件所绑定的元素。

打印事件

需求是局部的打印事件啦

打印页面全部：： window.print();

思路一：

写法（反正我没实现了，有好的写法可以借鉴一下子不~~）：

printMail=()=>{
    const el = findDOMNode(this);
    console.log('el',el.children[0].children[0].children[0].children[0].children[1].innerHTML)
    console.log('window',window.document.body.innerHTML)
    let oldHtml = window.document.body.innerHTML;
    let printHtml = el.children[0].children[0].children[0].children[0].children[1].innerHTML;
    window.document.body.innerHTML = printHtml;
    window.print();
    window.document.body.innerHTML = oldHtml;
  }
  printBtn=()=>{
    return (
      <div>
        <Button onClick={()=>{this.printMail()}}>打印该邮件</Button>
        <Button>关闭该邮件</Button>
      </div>
    )
  }

以下是我实现了的方法，分享一下：

printMail=()=>{
    const el = findDOMNode(this);
    let preContent = el.children[0].children[0].children[0].children[0].children[1].innerHTML || 
    window.__preContent || '';

    let printWindow = window.open('打印窗口','_blank');
    printWindow.document.write(preContent);
    printWindow.document.close();
    printWindow.print();
    printWindow.close();
  }

当在调用window.print事件时，他的优先级总是高于我们的方法，下面是两种不同的方法（第一种自己没试，有兴趣的尝试一下）

 printMail = () => {
    const {emailPrintStore:{setBtnDisplay,btnDisplay}}=this.props;
    let flag = document.execCommand("print");/* window.print(); 调用打印的功能*/
    if(flag){  //点击取消后执行的操作
        console.log("展现");
    } else {
    } 
  }

printMail = () => {
    this.btnDisplay='none';
    setTimeout(()=>{
      window.print();
      this.btnDisplay='block';
    },100);
  }

overflow的属性

1、overflow:auto ；内容会被修剪，超出设置的宽高后会出现滚动条

2、overflow:scroll;内容会被修剪，不管内容是否超出，都会出现滚动条的位置

3、overflow:visible;这个是默认值，内容不会被修剪，会出现在元素框外面。

4、overflow:hidden;内容被修剪，多余的内容被隐藏

5、overflow:inherit;从父元素那里继承overflow的值