|

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScript: 子要素に入ったときに mouseout 用の処理をさせないようにする

行儀の良い方法かどうかは分からないです。 とりあえずメモ。


document.getElementById("foo").addEventListener(
  "mouseout"
, function(e) {
    // e.currentTarget => リスナを設定した要素(子要素ではない)
    var rect = e.currentTarget.getClientRects()[0]; // とりあえず [0] で……

    // 内側にある場合は何もしない
    if(    e.clientX >= rect.left
        && e.clientX <= rect.right
        && e.clientY >= rect.top
        && e.clientY <= rect.bottom
    ){
      return;
    }

    // mouseout 用の処理
  }
, false
);

追記 20100724

……というのをやっつけで書いてお茶を濁したのですが、 見るからに微妙です。。。 そこで、javascript mouseout child などのキーワードで検索し直してみたところ いろいろ出てきました。 とりあえず一番上に出ていた記事へ誘導しておきます。

onMouseOut fix on nested elements – JavaScript « Web Development – Programming – Coding Recipes

追記 20100828
子要素が object 要素の場合 event.toElement, event.relatedTarget では取得できない (Firefox 3.6.8)ので、 event.rangeParent を使うのが良いかも。
スポンサーサイト

(solved) Javascriptのエラー: Security error" code: "1000

環境は Firefox 3.0.9。

javascript で スタイルシートをいじっていると

Security error"  code: "1000

とか

uncaught exception: Security error (NS_ERROR_DOM_SECURITY_ERR)

というエラーが出る。


たとえば head 要素内で

<link  href="foo.css" type="text/css" rel="stylesheet">
<link  href="bar.css" type="text/css" rel="stylesheet">
<style> body { color: red; } </style>

と書かれている場合、 document.styleSheets[0] ~ document.styleSheets[2] でこれらの3つのスタイルシートを取り出せるが、このとき 1つめの foo.css というファイルが 存在していなかったため

document.styleSheets[0].insertRule( ... );

などの操作ができず上記のエラーが出たらしい (これは書籍やweb検索などで調べて分かったのではなく、いろいろ試していて分かった)。


ルール追加の対象が既存のスタイルシート(document.styleSheets[0])である必要はなかったので、 新しいスタイルシートを生成し、そっちにルールを追加することにした。

function addCSS(rules){
  var headElement = document.getElementsByTagName("head")[0];
  var styleElement = document.createElement("style");
  styleElement.type = "text/css";
  headElement.appendChild(styleElement);
    
  var sheet = styleElement.sheet;
  for(var selector in rules){
    sheet.insertRule(selector + "{" + rules[selector] + "}", sheet.cssRules.length);
  }
}

addCSS(
  {
    "body": "padding: 0 5%;"
  , "p": "line-height: 200%;"
  }
);

以上。



** ホームに戻る

|
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。