javascriptのmatchesの使い方

Question

window.onclick = function (event) {
if (!event.target.matches('ct')) {
ct.classList.add('hide');
}
}

名前がctのidは確かに存在してどこをクリックしてもadd('hide')されます。
ct内ではadd('hide')したくないのですが、どこがいけないのでしょうか？

ブラウザはクローム最新版です。

Answer 1

Element.matches の引数に指定するのはCSSセレクタなので、
こうですね。

!event.target.matches('#ct')

こうでも良さそう。

event.target.id !== 'ct'

Comments

[mentanpinsan]

実はｃｔ内に<a>を入れていまして、それに気づかず苦戦しました。
当たり前ですが<a>内では反応なし、ｃｔのpadding,borderでは反応してくれました。
２つとも<a>を消すとうまくいきました。ありがとうございました。

Answer 2

ctの中のHTML要素をクリックした時にどうしたいかによりますね
ctの中すべてを反応させたいならこう

<script>
document.addEventListener('click', e=>{
  var flg=e.target.closest('#ct')!==null;
  console.log(flg);
});
</script>

<div id="hoge">
hoge1
<div id="ct">
ct1
<div id="fuga">
fuga
</div>
<input id="piyo" disabled><br>
ct2
</div>
hoge2
</div>

ただし、disabledしたinput要素などは反応しないので注意

Comments

[mentanpinsan]

ct内にほかの要素があっても可能ですね。親自身であるｃｔのpadding,borderでも反応してくれました。
ありがとうございました。