@okayuの大して技術的ではないブログ

記事を大幅アップデートしました。

はじめに

JavaScriptで画面上のクリッカブルな要素を列挙してみたという記事を書きました。
が、もっと良さげな方法を思い付いてしまいました。

何をもってクリック可能であるかを判別するか

上記記事では、タグや属性をもとにクリック可能であるかを判別していました。
しかし、その方法ではうまく判別できないことも時々ありました。

そこで、人間同様、要素にカーソルをホバーしたときのカーソルの見た目をもとに判別することにしました。

カーソルの見た目を取得する

CSSのcursorでカーソルの見た目を変更できるようです。
実例: cursor - CSS: カスケーディングスタイルシート | MDN

  • auto
  • text
  • pointer

などの値を取るそうです。

この値をJavaScriptから取得します。

[...document.querySelectorAll('body *')]  
    .filter(elm => {  
        const cursorStyles = [  
            'alias',  
            'context-menu',  
            'copy',  
            'help',  
            'pointer',  
            'text',  
            'zoom-in',  
            'zoom-out',  
        ];  

        const currentCursor = window.getComputedStyle(elm).cursor;  
        const parentCursor = window.getComputedStyle(elm.parentElement).cursor;  

        return cursorStyles.includes(currentCursor) && currentCursor !== parentCursor;  
    })  

まずbody内の全要素を取得します。
それをスプレッド演算子を用いて配列化し、filter()で絞っています。

cursorStylesはクリック可能であると人間(私)が判断できたCSSの値を適当に列挙したものです。
それに実際の値が含まれていた場合にtrueを返します。

CSSの値の取得はgetComputedStyle()を用いました。
CSSで明示的に設定されていない値に関しても、これを用いると取得できるようです。
詳しくは: window.getComputedStyle - Web API | MDN

また、クリック可能な要素が内包する要素までも取得してしまうことを防ぐため、parentElementcursorの値も調べています。

問題点

aタグの中にaタグがあったりするとうまく動きません。

また、CSSの値に依存しているため、かっこいいWebページなどでは動かないかもしれません。

また、遅い気がします。
まぁ全要素数 * 2回もgetComputedStyle()を叩いているので当然ではありますが。

おわりに

クリティカルな関数(getClickableElements())みたいなの、ないかなぁ(めんどくさがり屋)。

この記事へのコメント

まだコメントはありません