Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

7ページ目 | js

子要素のボタンをクリックしたときに親要素も反応してしまう時の対策

小要素をクリックしたはずなのに、親要素のクリックイベントも発動して困らされました。
解決策を見つけたのでメモしておきます。

$(".parent").click(function(e){
    if(e.target.tagName == "自分のタグ名"){
        //処理
    }
});

もし、押されたターゲットの要素名が自分と同じなら処理する。としておけば,子供の要素をクリックしたのに同時に親のクリックイベントが発動してしまうということを防げられます。

DEMO

親要素だよクリックしてね 小要素

a-blog cmsの組込みJSである、prettyPhotoでスマートフォンの時は無効化するための処理を考えてみた

a-blog cmsではrel属性にprettyPhotoがついているa要素に対して、hrefで画像のURLを指定してやると、その画像がポップアップで表示される組み込みJSが標準で導入されている

http://developer.a-blogcms.jp/reference/latest/builtinjs/prettyphoto.html

これを使うことにより、大きい画像などをおしゃれに上のように表示できるが、スマートフォンの時は表示したくないかもしれない。代わりに、別ウィンドウでその画像を表示させたいかもしれない。そのためのjsを書いてみた。

$(function(){
    var $pretty = $("[rel^=prettyPhoto]");
    if($pretty.length){
        var agent = navigator.userAgent;
       if(agent.search(/iPhone/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
           $pretty.removeAttr("rel");
           $pretty.unbind('click');
        }
    }
});

処理としては、ユーザーエージェントで、iPhoneとipodとAndroidを検出し、見つかった要素にたいして、rel属性を削除するのと、クリックイベントをunbindするというものだ。これで、prettyphotoが聞かなくなるはずである

prettyPhotoテスト

prettyPhotoテスト2


typeがnumberのテキストフィールドに数字以外の文字を入力させないようにする

テキストフィールドに数字以外の文字を一切受け付けない用にするためのコードを考えてみました。

$("body").on("keydown","input[type=number]",function(e){
    if((e.which >= 48 && e.which <= 57) || e.which == 46 || e.which == 8 || e.which == 37 || e.which == 39){
        return true;
    }else{
        e.preventDefault();
    }
});

このとき、十時キーの右と左の入力と、deleteキー、バックスペースの入力は受け付けないと不便なので、if文の中で、それを受け付けるようにしました。
左のキーが37で右のキーが39、deleteキーが46でbackspaceが8です。
でも環境によって違うかもしれません。
keycode表は下のサイトで確認してみてください。


ちなみにe.preventDefault()でブラウザの既存の機能が発動するのを妨げることができます。
よって、キー入力ができなくなるということです。


jsでもし〜が定義されてなければ...を代入という記述を簡略化


今回は、便利にブラウザ上でjsが編集できる僕が一年前に作ったプログラミング学習環境、Atlas Editorをつかって、コードを書いてみる。

いままで僕はjsでもし値がなければ、という処理をif文で書いていたが、| |演算子で簡略化出来ることを知った。

var number = null;
var output = 0;
var ret = number || output;

上のようなコードを書いたとき、retには0が代入される。
実行結果はこちら



堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド