Knockout.JS -在div外部单击时运行函数

jpfvwuh4 于 2022-11-10 发布在其他

关注(0)|答案(3)|浏览(170)

我正在尝试执行一个函数，当点击div的外面使用knockout。我试图这样做，通过使用事件绑定与模糊。我想我是接近，我只是需要一点帮助。
filterFromList函数工作正常。
相关JS

self.filterFromList = function (item) {
    self.selectedName(item.name);
    self.location().forEach(function(place) {
        if (place.name === self.selectedName()) {
            place.showLocation(true);
            place.marker.setVisible(true);
        } else {
            place.showLocation(false);
            place.marker.setVisible(false);
        }
    });
};

self.unfilter = function (item) {
    console.log("blurring");
    self.location().forEach(function (place) {
        place.showLocation(true);
        place.marker.setVisible(true);
    })
};

3条答案

按热度按时间

8ftvxx2r1#

您可以使用自订bindingHandler（fiddle）来完成这项作业：

ko.bindingHandlers.clickOutside = {
  init: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
    var fn = ko.utils.unwrapObservable(valueAccessor());

    $('html').on('click', function(e) {
      if (!($.contains(element, e.target) || element === e.target)) {
        fn();
      }
    });
  },
}

var vm = {
  clickOutside: function(msg) {
    console.log(msg);
  }
};

ko.applyBindings(vm);

于飞：

<div style="background-color:green;">
  Outside area
  <div data-bind="clickOutside: clickOutside.bind($data, 'clicked outside of red div')" style="background-color:red;">
  inside area
  <ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</div>

基本上，我们的想法是在可能的最外层元素（<html>）中添加一个事件侦听器，然后检查单击目标是直接还是间接位于（$.contains(what contains, what is contained)）所需的容器中，如果是，则不执行任何操作，如果不是，则调用绑定函数。

赞(0）回复(0）举报 2022-11-10

0s0u357o2#

通过在有问题的div中添加tabindex属性修复了这个问题。谢谢您的帮助！

<a class="location-click" tabindex="0" data-bind="click: $parent.filterFromList, event: { blur: $parent.unfilter } ">
            <li class="location-block" data-bind="visible: showLocation">
                <img class="location-img" data-bind="attr: {src: imgURL}"></img>
                <h4 data-bind="text: name"></h4>
                <hr>
            </li>
</a>

赞(0）回复(0）举报 2022-11-10

suzh9iv83#

注意：使用敲除绑定效果不佳，比如（if和with）第一次显示元素容器init时效果很好，如果再次隐藏并显示，单击外部就不再起作用
，而不是用途：

ko.bindingHandlers.clickOutside = {
        init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
            var fn = ko.utils.unwrapObservable(valueAccessor().fn);
            var uid = ko.utils.unwrapObservable(valueAccessor().uid);
            $('html').on('click', function (e) {
                if ($(e.target).parents('.' + uid).length === 0) {
                    fn();
                }
            });
        },
    }

将UID分配给父级，则这将与“with”和“if”绑定一起使用

赞(0）回复(0）举报 2022-11-10

我来回答

Knockout.JS -在div外部单击时运行函数

3条答案

相关问题

热门标签

最新问答