KnockoutJS - Click 绑定

更新于 2025/1/15 20:22:17

Click 点击绑定是最简单的绑定之一，用于根据点击调用与 DOM 元素关联的 JavaScript 函数。此绑定的工作方式类似于事件处理程序。

这最常用于 button、input 和 a 等元素，但实际上适用于任何可见的 DOM 元素。

语法

click: <binding-function>

参数

此处的参数将是一个需要根据点击调用的 JavaScript 函数。这可以是任何函数，不必是 ViewModel 函数。

示例

让我们看看以下示例，它演示了点击绑定的使用。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Click Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>

      <p>Enter your name: <input data-bind = "value: someValue" /></p>
      <p><button data-bind = "click: showMessage">Click here</button></p>

      <script type = "text/javascript">
         function ViewModel () {
            this.someValue = ko.observable();
            
            this.showMessage = function() {
               alert("Hello "+ this.someValue()+ "!!! How are you today?"+ 
                  "
Click Binding is used here !!!");
            }
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

输出

让我们执行以下步骤来查看上述代码的工作原理 −

将上述代码保存在 click-bind.htm 文件中。
在浏览器中打开此 HTML 文件。
单击单击此处按钮，屏幕上将显示一条消息。

观察

当前项目也可以作为参数传递

当处理程序函数为调用。这在处理数据集合时很有用，其中需要对一组项目执行相同的操作。

示例

让我们看看下面的例子以更好地理解它。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Click binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <p>List of product details:</p>
      <ul data-bind = "foreach: productArray ">
         <li>
            <span data-bind = "text: productName"></span>
               <a href = "#" data-bind = "click: $parent.removeProduct">Remove </a>
         </li>
      </ul>

      <script type = "text/javascript">
         function AppViewModel() {
            self = this;
            self.productArray = ko.observableArray ([
               {productName: 'Milk'},
               {productName: 'Oil'},
               {productName: 'Shampoo'}
            ]);

            self.removeProduct = function() {
               self.productArray.remove(this);
            }
         };
      
         var vm = new AppViewModel();
         ko.applyBindings(vm);
      </script>
   
   </body>
</html>

输出

让我们执行以下步骤来查看上述代码的工作原理 −

将上述代码保存在 click-for-current-item.htm 文件中。
在浏览器中打开此 HTML 文件。
removeProduct 函数在每次单击 Remove 链接时都会被调用，并且会针对数组中的特定项目调用。
请注意，$parent 绑定上下文用于到达处理程序函数。

传递更多参数

DOM 事件以及当前模型值也可以传递给处理程序函数。

示例

让我们看看下面的例子以更好地理解它。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Click Binding</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <p>Press Control key + click below button.</p>
      <p><button data-bind = "click: showMessage">Click here to read message</button></p>

      <script type = "text/javascript">
         function ViewModel () {
            
            this.showMessage = function(data,event) {
               alert("Click Binding is used here !!!");
               
               if (event.ctrlKey) {
                  alert("User was pressing down the Control key.");
               }
            }
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

输出

让我们执行以下步骤来查看上述代码的工作原理 −

将上述代码保存在 click-bind-more-params.htm 文件中。
在浏览器中打开此 HTML 文件。
此绑定捕获控制键的按下。

允许默认点击操作

KnockoutJS 默认阻止点击事件执行任何默认操作。这意味着如果在 <a> 标签上使用点击绑定，那么浏览器将仅调用处理程序函数，而不会真正将您带到 href 中提到的链接。

如果您希望在点击绑定中执行默认操作，那么您只需要从处理程序函数返回 true。

示例

让我们看下面的示例，该示例演示了点击绑定执行的默认操作。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Click Binding - allowing default action</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <a href = "http://www.tutorialspoint.com//" target = "_blank"  
         data-bind = "click: callUrl">Click here to see how default 
         Click binding works.
      </a>

      <script type = "text/javascript">
         function ViewModel() {
            
            this.callUrl = function() {
               alert("Default action in Click Binding is allowed here !!! 
                  You are redirected to link.");
               return true;
            }
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

输出

让我们执行以下步骤来查看上述代码的工作原理 −

将上述代码保存在 click-default-bind.htm 文件中。
在浏览器中打开此 HTML 文件。
单击链接，屏幕上将显示一条消息。 href 中提到的 URL 在新窗口中打开。

防止事件冒泡

KO 将允许点击事件冒泡到更高级别的事件处理程序。这意味着如果您嵌套了 2 个点击事件，那么这两个事件的点击处理函数都会被调用。如果需要，可以通过添加一个名为 clickBubble 的额外绑定并向其传递 false 值来防止这种冒泡。

示例

让我们看看以下示例，它演示了 clickBubble 绑定的使用。

<!DOCTYPE html>
   <head>
      <title>KnockoutJS Click Binding - handling clickBubble</title>
      <script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"
         type = "text/javascript"></script>
   </head>
   
   <body>
      <div data-bind = "click: outerFunction">
         <button data-bind = "click: innerFunction, clickBubble:false">
            Click me to see use of clickBubble.
         </button>
      </div>

      <script type = "text/javascript">
         function ViewModel () {
         
            this.outerFunction = function() {
               alert("Handler function from Outer loop called.");
            }
         
            this.innerFunction = function() {
               alert("Handler function from Inner loop called.");
            }
         };

         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
      
   </body>
</html>

输出

让我们执行以下步骤来查看上述代码的工作原理 −