「Example 4: eventバインディング:子要素でイベント発生時、親要素のイベント発生を防ぐ」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

Example 4: eventバインディング:子要素でイベント発生時、親要素のイベント発生を防ぐ

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Example 4: eventバインディング:子要素でイベント発生時、親要素のイベント発生を防ぐ</title>
  6. <script type="text/javascript" src="knockout-2.1.0beta.js"></script>
  8. </head>
  9. <body>
  10. <h1>Example 4: eventバインディング:子要素でイベント発生時、親要素のイベント発生を防ぐ</h1>
  12. <div data-bind="event: { click: myDivHandler }" style="border:1px solid #ccc;display:inline-block; padding:20px;">
  13.   <button data-bind="event: { click: myButtonHandler }, clickBubble: false">
  14.     click me
  15.   </button><br />
  16.   <span style="font-size:10pt;">※○○Bubbleを使用</span>
  17. </div>
  19. <div data-bind="event: { click: myDivHandler }" style="border:1px solid #ccc;display:inline-block; padding:20px;">
  20.   <button data-bind="event: { click: myButtonHandler }">
  21.     click me
  22.   </button><br />
  23.   <span style="font-size:10pt;">※○○Bubbleを未使用</span>
  24. </div>
  26. <p>
  27. 「mouseoverイベント」でコレを使うなら「mouseoverBubble」と記載。他同様っぽい。
  28. </p>
  30. <script type="text/javascript">
  31.   var viewModel = {
  32.     myDivHandler: function() {
  33.       alert("myDivHandlerが発生：親要素")
  34.     },
  35.     myButtonHandler: function() {
  36.       alert("myButtonHandlerが発生：子要素")
  37.     }
  38.   };
  40.   ko.applyBindings(viewModel);
  41. </script>
  43. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  44. <a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  45. <a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
  46. </div>
  48. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  49. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  50. </div>
  52. </body>
  53. </html>