如何在JavaScript中避免杀死事件处理程序？

Question

我有一个打印功能，可以让我打印HTML内容。我可以正常点击打印按钮，但是在打印布局上点击取消按钮后，所有的Javascript都被停止了。我不能再对其他按钮执行任何操作。

HTML：

<div id="printArea">
<p>Hello World</p>
</div>
<button type="button" id="printer">Print</button>

Javascript

$(document).on('click', '#printer',function(event){
        event.preventDefault();
        var printContents = document.getElementById("printArea").innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
    });

我希望点击打印按钮后，通过单击取消按钮返回，并且其他按钮仍然可以像往常一样执行操作。

非常感谢您的帮助。

- Tum Lina

---

使用打印样式表，无需替换内容。 - epascarello

请显示主页：( - Tum Lina

打印元素是否为顶部元素的内部内容 - Arun P Johny

http://jsfiddle.net/arunpjohny/01m8pvt8/3/ - Arun P Johny

@TumLina 请查看更新 http://jsfiddle.net/arunpjohny/01m8pvt8/3/ - Arun P Johny

Answer 1

最好的解决方案是使用CSS来隐藏/显示元素，但如果不可能，您可以在脚本中不替换元素而是显示/隐藏它们。

$(document).on('click', '#printer', function (event) {
    event.preventDefault();
    var $print = $("#printArea");
    //hide teh contents of the page
    $(document.body).wrapInner('<div style="display: none"></div>');
    //move a copy of the print area to the body and show it
    var $div = $('<div />').append($print.clone().contents()).appendTo(document.body);
    window.print();
    //remove the temporary print display
    $div.remove();
    //show back the original content
    $(document.body).children().contents().unwrap();
});

演示： Fiddle

- Arun P Johny

Answer 2

当你使用 document.body.innerHTML = originalContents; 时，它会创建没有任何事件函数附加的新元素。

最好使用CSS隐藏您不想打印的元素，而不是更改任何HTML元素。CSS提供了仅在页面打印时才生效的规则。

像这样的东西应该可以解决问题（根据您的HTML结构，您可能需要进行微调）。

@media print {
  body * { display:none; }
  #printArea { display:block; }
}

请阅读this或this。

- Bob