Pタグとbuttonタグでclickイベントに差が出る

<P>と<button>に同じ内容のclickイベントを登録しているのですが、挙動が変わります。動作環境はmacのchromeです。

同じ内容を<button>のclickイベントに割り当てると動作しpreを全選択しますが、

<P>に同じ内容のclickイベントを割り当てても動作しません。これはなぜでしょうか？

<html>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<body>
<pre class="prettyprint" id="src02">
        &lt;html&gt; 
            &lt;script&gt; 
                console.dir("test"); 
            &lt;/script&gt; 
        &lt;/html&gt; 
</pre>
<button id="copy01">コピー1</button>
<p id="copy02">コピー2</p>
</body>

<script>
(()=>{
    var b = document.querySelector('#copy01');
    b.addEventListener('click',()=>{
        console.log("test1");
        var s = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(document.querySelector("#src02"));
        s.addRange(range);
    });

    var a = document.querySelector('#copy02');
    a.addEventListener('click',()=>{
        console.log("test2");
        var s = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(document.querySelector("#src02"));
        s.addRange(range);
    });
})();
</script>

</html>

m.ts10806

2019/01/15 00:36

WindowsのChromeで試しましたが、button押下でも「全選択」はしません。ただ「testn」は出るのでpも「動作しない」ことはないですね。

kuniatsu

2019/01/15 01:10

環境差があるようですね。windowsでダメなら根本的に直したほうがいいですね。協力ありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

button, inputとそれ以外ではどうしても挙動が違うようなので、window.getSelection();のあとに.empty();で、一度空にすればできそうです。

js
1    var b = document.querySelector('#copy01');
2    b.addEventListener('click',()=>{
3        console.log("test1");
4        var s = window.getSelection();
5        s.empty();
6
7        var range = document.createRange();
8        range.selectNodeContents(document.querySelector("#src02"));
9        s.addRange(range);
10    });
11
12    var a = document.querySelector('#copy02');
13    a.addEventListener('click',()=>{
14        console.log("test2");
15        var s = window.getSelection();
16        s.empty();
17
18        var range = document.createRange();
19        range.selectNodeContents(document.querySelector("#src02"));
20        s.addRange(range);
21    });