入门

监控属性

使用内置绑定

控制文本和外观

绑定逻辑控制

处理表单属性

解析模板

template 绑定

高级应用

插件

mapping 插件

"click" 绑定

目的

click 绑定在DOM元素上添加事件句柄以便元素被点击的时候执行定义的JavaScript 函数。大部分是用在 button, input, 和链接 a上, 但是可以在任意元素上使用。

The click binding adds an event handler so that your chosen JavaScript function will be invoked when the associated DOM element is clicked. This is most commonly used with elements like button, input, and a, but actually works with any visible DOM element.

例子

<div>
    You've clicked <span data-bind="text: numberOfClicks"></span> times
    <button data-bind="click: incrementClickCounter">Click me</button>
</div>
<script type="text/javascript">
    var viewModel = {
        numberOfClicks : ko.observable(0),
        incrementClickCounter : function() {
            var previousCount = this.numberOfClicks();
            this.numberOfClicks(previousCount + 1);
        }
    };
</script>

每次点击按钮的时候，都会调用 incrementClickCounter() 函数，然后更新自动更新点击次数。

Each time you click the button, this will invoke incrementClickCounter() on the view model, which in turn changes the view model state, which causes the UI to update.

参数

主参数

click 点击事件时所执行的函数。

The function you want to bind to the element’s click event.

你可以声明任何JavaScript函数 – 不一定非要是view model里的函数。你可以声明任意对象上的任何函数，例如： click: someObject.someFunction。

You can reference any JavaScript function - it doesn’t have to be a function on your view model. You can reference a function on any object by writing click: someObject.someFunction.

其他参数
- 无

注1: 传递 “当前项目” 作为处理函数的一个参数

当调用处理程序时， Knockout 将提供当前模型作为第一个参数的值。如果你是用集合中的每个项的呈现UI，需要知道被点击的项目时。这一点尤为有用。例如，

When calling your handler, Knockout will supply the current model value as the first parameter. This is particularly useful if you’re rendering some UI for each item in a collection, and you need to know which item’s UI was clicked. For example,

<ul data-bind="foreach: places">
    <li>
        <span data-bind="text: $data"></span>
        <button data-bind="click: $parent.removePlace">Remove</button>
    </li>
</ul>
 <script type="text/javascript">
     function MyViewModel() {
         var self = this;
         self.places = ko.observableArray(['London', 'Paris', 'Tokyo']);
         // The current item will be passed as the first parameter, so we know which place to remove
         self.removePlace = function(place) {
             self.places.remove(place)
         }
     }
     ko.applyBindings(new MyViewModel());
</script>

这个例子有两点需要注意:

如果你在一个嵌套的绑定上下文。例如，如果你在 foreach 或 with 中, 但你处理函数在根 viewmodel 或其他父上下文，您需要使用前缀，例如 $parent 或 $root 来查找处理函数。关于 $parent 和 $root绑定上下文的信息，请参见文档foreach。
viewmodel中，通常很有用，宣布自或其他变量作为别名，则此。这样做可以避免重新定义任何问题，这是第二个事件处理程序或Ajax请求回调。

If you’re inside a nested binding context, for example if you’re inside a foreach or a with block, but your handler function is on the root viewmodel or some other parent context, you’ll need to use a prefix such as $parent or $root to locate the handler function. For more information about $parent, $root, and binding contexts, see the documentation about foreach.
In your viewmodel, it’s often useful to declare self (or some other variable) as an alias for this. Doing so avoids any problems with this being redefined to mean something else in event handlers or Ajax request callbacks.

注2: 访问事件源对象

有些情况，你可能需要使用事件源对象，Knockout会将这个对象传递到你函数的第一个参数：

In some scenarios, you may need to access the DOM event object associated with your click event. Knockout will pass the event as the second parameter to your function, as in this example:

<button data-bind="click: myFunction">
    Click me
</button>
 <script type="text/javascript">
    var viewModel = {
        myFunction: function(data, event) {
            if (event.shiftKey) {
                //do something different when user has shift key down
            } else {
                //do normal action
            }
        }
    };
    ko.applyBindings(viewModel);
</script>

如果你需要的话，可以使用匿名函数的第一个参数传进去，然后在里面调用：

If you need to pass more parameters, one way to do it is by wrapping your handler in a function literal that takes in a parameter, as in this example:

<button data-bind="click: function(data, event) { myFunction(data, event, 'param1', 'param2') }">
    Click me
</button>

这样，KO就会将事件源对象传递给你的函数并且使用了。

Now, KO will pass the data and event objects to your function literal, which are then available to be passed to your handler.

另外，您更喜欢在视图中避免功能的文本，你可以使用 bind 函数，具体的参数值函数参考：

Alternatively, if you prefer to avoid the function literal in your view, you can use the bind function, which attaches specific parameter values to a function reference:

<button data-bind="click: myFunction.bind($data, 'param1', 'param2')">
    Click me
</button>

注3: 允许执行默认事件

默认情况下，Knockout会阻止冒泡，防止默认的事件继续执行。例如，如果你用 click 绑定1个 a 标签 (a链接)，在执行完自定义事件时它不会链接 href地址。这特别有用是因为你的自定义事件主要就是操作你的view model，而不是连接到另外一个页面。

By default, Knockout will prevent the click event from taking any default action. This means that if you use the click binding on an a tag (a link), for example, the browser will only call your handler function and will not navigate to the link’s href. This is a useful default because when you use the click binding, it’s normally because you’re using the link as part of a UI that manipulates your view model, not as a regular hyperlink to another web page.

当然，如果你可以让默认的事件继续执行，你可以在你 click 的自定义函数里返回 true。

However, if you do want to let the default click action proceed, just return true from your click handler function.

注4: 防止事件冒泡

默认情况下，Knockout允许click事件继续在更高一层的事件句柄上冒泡执行。例如，如果你的元素和父元素都绑定了 click 事件，那当你点击该元素的时候两个事件都会触发的。如果需要，你可以通过额外的绑定 clickBubble 来禁止冒泡。例如：

By default, Knockout will allow the click event to continue to bubble up to any higher level event handlers. For example, if your element and a parent of that element are both handling the click event, then the click handler for both elements will be triggered. If necessary, you can prevent the event from bubbling by including an additional binding that is named clickBubble and passing false to it, as in this example:

    <div data-bind="click: myDivHandler">
        <button data-bind="click: myButtonHandler, clickBubble: false">
            Click me
        </button>
    </div>

默认情况下， myButtonHandler 会先执行，然后会冒泡执行 myDivHandler会先执行，然后会冒泡执行 clickBubble 为 false 的时候，冒泡事件会被禁止。

Normally, in this case myButtonHandler would be called first, then the click event would bubble up to myDivHandler. However, the clickBubble binding that we added with a value of false prevents the event from making it past myButtonHandler.

依赖性

除KO核心类库外，无依赖。

Knockout 中文文档帮助手册教程

click 绑定

入门