設定されたイベント処理を消す

2015年8月3日

設定されているイベント処理を取り消すには
off()命令を使います。

$( セレクター ).off( "イベント発生の条件" );

サンプルコードでは、a要素がクリックされるとimg要素を
書き換える処理が設定されています。「a要素取消」ボタンを
クリックすると、off()でa要素のイベントを消します。

取り消すと画像を切り替える機能がなくなるので
通常のリンクになります。

実行結果はこちらです。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQueryStudy</title>
    <style>
	*{margin:0;padding:0;}
	
    #container{
        width:640px;
        height:400px;
        background-color:white;
        font-weight:100;
        margin:0 auto;}
    #box{
        width:100px;
        height:100px;
        background-color:blue;}
    button,li{margin:8px;}
    </style>        
    <script src="js/jquery-1.11.3.js"></script>  
    
</head>
<body>

<div id="container">

<button>a要素取消</button>

<ul>
    <li><a href="kuroneko.jpg">黒猫</a></li>
    <li><a href="shironeko.jpg">白猫</a></li>
    <li><a href="mikeneko.jpg">三毛猫</a></li>    
</ul>
<p><img src="kuroneko.jpg" alt="黒猫" width="100" height="100"></p>
    
</div><!--contatiner-->
    

<script>
$(document).ready(function(){
    
    $("a").click(function(){
       $("img").attr("src",$(this).attr("href"))
            .attr("alt",$(this).text());
        return false;
    });

    $("button").click(function(){
        $("a").off("click"); 
    });
});
</script>

</body>
</html>

<!doctype html>

<html>

<head>

<title>jQueryStudy</title>

<style>

*{margin:0;padding:0;}

#container{

width:640px;

height:400px;

background-color:white;

font-weight:100;

margin:0 auto;}

#box{

width:100px;

height:100px;

background-color:blue;}

button,li{margin:8px;}

</style>

</head>

<body>

<button>a要素取消</button>

<ul>

</ul>

</div>

$(document).ready(function(){

$("a").click(function(){

$("img").attr("src",$(this).attr("href"))

.attr("alt",$(this).text());

return false;

});

$("button").click(function(){

$("a").off("click");

});

</script>

</body>

</html>

-jQuery
-イベント処理を取り消す

comment コメントをキャンセル

jQuery

jQueryで聖剣伝説に出てくるリングメニューを作ってみる

タイトルの通り、聖剣伝説で登場する円状に広がるリング状のメニューを今回紹介します。サンプルコードの実行結果はこちら

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Portfolio</title>
    
    <!--共通で使用するCSSを読み込む-->
    <link rel="stylesheet" type="text/css" href="">

    <!--共通で使用するjQueryを読み込む-->          
    <script src="js/jquery-1.11.3.js"></script>
    
    <!--　ｊQueryUIを読み込む-->
    <script src="js/ui/jquery-ui.js"></script> 
    
    <!--jQuery(flowerNav)を使用するために
    　　必要なCSS,JSファイルを読み込む-->
	<link rel="stylesheet" type="text/css" 
          href="js/flowernav.css">

    <script src="js/jquery.flowernav-1.0.js"></script>


    <style>
	
	*{margin:0;padding:0}

	p {
		font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
		 "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
		 font-size:16px;
	}
	#container{}
		
	</style>
</head>
<body>
    
<div id="container">
    <nav id="flash">
    <ul>
        <!-- link used as button by default .btn -->
        <li><a href="#flash" class="btn my_button">click!</a>
            <!-- second level link will be used as childs -->
            <ul>
                <li><a href="#"><img src="img/CL004.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL005.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL006.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL007.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL009.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL010.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL012.JPG" width="100" height="100" ></a></li>
                <li><a href="#"><img src="img/CL019.JPG" width="100" height="100" ></a></li>
            </ul>
        </li>
    </ul>
    </nav>    
</div>

	<script>
	$(document).ready(function() {

		// no option initialisation, with dragging off and default settings (clockwise rotation)
		$('#nav').flowernav();
		
		// dragging enabled -> requires the "draggable" function of the jQuery UI Plugin / see jqueryui.com
		$('#nav').flowernav({drag:true});
		
		// initial callback function possible after plugin is invoked
		$('#nav').flowernav( {}, function(){ $('#log').append('"#'+this.id+'" flowernav inititated<br/>');} );
	
		// all of the default settings
		$('#flash').flowernav({
			radiusX			: 140, 		// radius of x axis in px, default: 110
			radiusY			: 110,		// radius of y axis in px, default: 110
			rotate			: true, 	// rotate items in a circle, default: true
			direction		: 'ccw', 	// counter clockwise rotation, default: clockwise
			speed			: 1, 		// speed inverse proportional 1 = fastest, default: 3
			oSpeed			: 1000, 	// speed of opening animation in ms, default: 500
			cSpeed			: 400,		// speed of closing animation in ms, default: 400
			easingOpen		: 'easeOutBounce', // override default easing of opening animation, default '' (jquery internal default) others via jquery ui or easing plugin,
			easingClose		: 'easeInBack', // override default easing of opening animation, default '' (jquery internal default) others via jquery ui or easing plugin,
			hoverStop		: true, 	// does stop the animation on item hover, default: true
			hoverOpacityIn	: 1,		// hover opacity of li's, default: 1
			hoverOpacityOut	: .4,		// opacity of li's , default: .5
			hoverSpeedIn	: 100,		// speed of hover toggle opacity animation in ms, default: 600
			hoverSpeedOut	: 700,		// speed of hover-out toggle opacity animation in ms, default: 600
			intv			: 10, 		// rotation interval time in ms, default: 10
			offset			: 45, 		// offset in circle in degrees, default: 0
			drag 			: true, 	// requires jquery ui plugin to function, default: false
			// callbacks
			btnClass		: '.btn',
			onOpenStart	: function(){ $('#log').append('"#'+this.attr('id')+' onOpenStart<br/>'); }, // at start of opening animation
			onOpenEnd	: function(){ $('#log').append('"#'+this.attr('id')+' onOpenEnd<br/>'); }, // at end of opening animation
			onCloseStart: function(){ $('#log').append('"#'+this.attr('id')+' onCloseStart<br/>'); }, // at start of closing animation
			onCloseEnd	: function(){ $('#log').append('"#'+this.attr('id')+' onCloseEnd<br/>'); } // at end of closing animation
		});
	});	
	</script>
</body>
</html>

100

101

<!doctype html>

<html>

<head>

<title>Portfolio</title>

<!--jQuery(flowerNav)を使用するために

　　必要なCSS,JSファイルを読み込む-->

href="js/flowernav.css">

<style>

*{margin:0;padding:0}

p {

font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",

"メイリオ", Meiryo, Osaka, "ＭＳＰゴシック", "MS PGothic", sans-serif;

font-size:16px;

}

#container{}

</style>

</head>

<body>

<ul>

<li><a href="#flash" class="btn my_button">click!</a>

<ul>

</ul>

</li>

</ul>

</nav>

</div>

$(document).ready(function() {

// no option initialisation, with dragging off and default settings (clockwise rotation)

$('#nav').flowernav();

// dragging enabled -> requires the "draggable" function of the jQuery UI Plugin / see jqueryui.com

$('#nav').flowernav({drag:true});

// initial callback function possible after plugin is invoked

$('#nav').flowernav( {}, function(){ $('#log').append('"#'+this.id+'" flowernav inititated<br/>');} );

// all of the default settings

$('#flash').flowernav({

radiusX : 140, // radius of x axis in px, default: 110

radiusY : 110, // radius of y axis in px, default: 110

rotate : true, // rotate items in a circle, default: true

direction : 'ccw', // counter clockwise rotation, default: clockwise

speed : 1, // speed inverse proportional 1 = fastest, default: 3

oSpeed : 1000, // speed of opening animation in ms, default: 500

cSpeed : 400, // speed of closing animation in ms, default: 400

easingOpen : 'easeOutBounce', // override default easing of opening animation, default '' (jquery internal default) others via jquery ui or easing plugin,

easingClose : 'easeInBack', // override default easing of opening animation, default '' (jquery internal default) others via jquery ui or easing plugin,

hoverStop : true, // does stop the animation on item hover, default: true

hoverOpacityIn : 1, // hover opacity of li's, default: 1

hoverOpacityOut : .4, // opacity of li's , default: .5

hoverSpeedIn : 100, // speed of hover toggle opacity animation in ms, default: 600

hoverSpeedOut : 700, // speed of hover-out toggle opacity animation in ms, default: 600

intv : 10, // rotation interval time in ms, default: 10

offset : 45, // offset in circle in degrees, default: 0

drag : true, // requires jquery ui plugin to function, default: false

// callbacks

btnClass : '.btn',

onOpenStart : function(){ $('#log').append('"#'+this.attr('id')+' onOpenStart<br/>'); }, // at start of opening animation

onOpenEnd : function(){ $('#log').append('"#'+this.attr('id')+' onOpenEnd<br/>'); }, // at end of opening animation

onCloseStart: function(){ $('#log').append('"#'+this.attr('id')+' onCloseStart<br/>'); }, // at start of closing animation

onCloseEnd : function(){ $('#log').append('"#'+this.attr('id')+' onCloseEnd<br/>'); } // at end of closing animation

});

</script>

</body>

</html>

今回使用するプラ ...

: jQuery

画像読込の進捗具合が分かるプログレスバーを作成

タイトルの通りです。読み込み中の画像を表示しないようにし、かつ画像読込の進捗度を表示してみます。サンプルコードの実行結果はこちらサンプルコードをみると、画像は１００枚ほど読み込みますが、ブラウザへ ...

: jQuery

ダブルクリックされたことを感知するdblclick()

特定の要素がダブルクリックされたときに、何かしらの処理を実行したい場合は、 dblclick()を使用します。書き方はclick()と同様で、 function(){...}を書いて、その中に実行し ...

: jQuery

画面を下にスクロールさせると、違うデザインのメニューがついてくる

タイトルの通りです。画面をスクロールさせると、違うデザインのメニューがついてくる機能を今回作成しました。サンプルコードの実行結果はこちら今回は「throttle-debounce」プラグインを使用 ...

: jQuery

ページトップへスムーズにスクロールさせる。

今回は、ボタンをクリックしたらページのトップへ滑らかに遷移するというものを jQueryを使って作成します。１．jQueryのプラグインを入手する。今回は、トップページにスムーズに戻るためにイ ...

対象の要素を絞ってイベントを登録する

非表示の要素を表示する show()