click: <binding-function>

优质

小牛编辑

134浏览

2023-12-01

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

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

Syntax

click: <binding-function>

Parameters

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

Example

让我们看一下下面的例子，它演示了点击绑定的用法。

<!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?"+ 
                  "\nClick Binding is used here !!!");
            }
         };
         var vm = new ViewModel();
         ko.applyBindings(vm);
      </script>
   </body>
</html>

Output

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

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

观察 (Observations)

Current Item也可以作为参数传递

当调用处理程序函数时，还可以提供当前模型值作为参数。这在处理数据集合时很有用，其中需要对一组项目执行相同的操作。

Example

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

<!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>

Output

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

将以上代码保存在click-for-current-item.htm文件中。
在浏览器中打开此HTML文件。
每次单击“删除”链接时都会调用removeProduct函数，并在数组中为该特定项调用该函数。
请注意，$ parent绑定上下文用于到达处理函数。

传递更多参数

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

Example

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

<!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>

Output

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

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

允许默认单击操作

KnockoutJS默认情况下阻止click事件执行任何默认操作。这意味着如果在《a》标记上使用了Click绑定，那么浏览器将只调用处理函数，并且实际上不会将您带到href中提到的链接。

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

Example

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

<!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 = "https://www.xnip.cn//" 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>

Output

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

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

防止事件冒泡

KO将允许click事件冒泡到更高级别的事件处理程序。这意味着如果您有2个嵌套的单击事件，则将调用它们的单击处理函数。如果需要，可以通过添加一个名为clickBubble的额外绑定并将false值传递给它来防止这种冒泡。

Example

让我们看一下下面的例子，它演示了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>

Output

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

将以上代码保存在click-cllickbubble-bind.htm文件中。
在浏览器中打开此HTML文件。
单击按钮，观察添加具有值false的clickBubble绑定可防止事件超过innerFunction。

click: &lt;binding-function&gt;

观察 (Observations)

Current Item也可以作为参数传递

传递更多参数

允许默认单击操作

防止事件冒泡

click: <binding-function>