document.execCommand无法与addEventListener一起使用

Question

I am currently working on an editable part of my HTML. I am using document.execCommand method, but however I can't get it to work with addEventListener. But, with inline javascript it work. This is the code that don't work.

let btn = document.getElementById('click');

btn.addEventListener('click', function(){
 document.execCommand("bold")
 let a = document.execCommand("bold") ? true: false;
 console.log(a);
})

But, If I use inline, it work

<button id="click" onclick="document.execCommand("bold")">CLICK</button>

Does the document.execCommand method behave differently when invoked inside addEventListener?

Answer 1

The problem you have is the fact you are expecting the Boolean to be if the bold was added or removed. Problem is the Boolean just tells you if what was selected was able to toggle bold. It has nothing to do if it was added or removed.

So what can you do to detect it? Well you can look at what is in the current selection and see if a parent element is bold. Or you can use a method queryCommandState which seems to be poorly documented everywhere which allows you to see what the state of the current selection is. Combine it with selection change event and you can determine if it is applied or not.

Basic Idea:

 var btnBold = document.querySelector("button") btnBold.addEventListener("mousedown", function (evt) { evt.preventDefault(); var x = document.execCommand("bold"); console.log(document.queryCommandState('bold')); }) document.addEventListener("selectionchange", function (evt) { btnBold.classList.toggle("active", document.queryCommandState('bold')); }) 

 div { outline: 1px solid black; } button.active { background-color: green; } 

 <div id="x" contenteditable="true"> Foo Bar </div> <button>Bold</button>