dijitコンテンツをネストしたときにイベントを親に渡したくない

そんなとき、dojo.stopEvent(event)一発で可能です。

以下、ContentPaneをネストしたときに、onClickイベントを親に渡さない例です。

[sourcecode language=”html”]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<style type="text/css">
@import "/js/dojo/resources/dojo.css";
@import "/js/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" src="/js/dojo/dojo.js"
djConfig="parseOnLoad: false, isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser");

dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");

dojo.addOnLoad(function() {
dojo.parser.parse();
});

</script>
<style type="text/css">
.nest {
border: 1px solid #CCCCCC;
margin: 5px;
}
</style>
</head>
<body class="tundra" id="body">
<div dojoType="dijit.layout.BorderContainer" design="screenDesign" style="width:100%;height:100%">

<div dojoType="dijit.layout.ContentPane" region="center" class="nest">
topのトップ<br/>
<script type="dojo/connect" event="onClick" args="event">
alert("topのオンクリック");
</script>
<div dojoType="dijit.layout.ContentPane" class="nest">
1つネスト
<script type="dojo/connect" event="onClick" args="event">
alert("1つネストのオンクリック");
dojo.stopEvent(event);
return false;
</script>
<div dojoType="dijit.layout.ContentPane" class="nest">
2つネスト
<script type="dojo/connect" event="onClick" args="event">
alert("2つネストのオンクリック");
dojo.stopEvent(event);
return false;
</script>
</div>
</div>
topのボトム
</div>

</div>

</body>
</html>
[/sourcecode]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です