Question

单击节点时，我使用Cytoscape Qtip extension显示qtips。

通常，您可以使用hide: false选项阻止qtips隐藏。使用它时，如果有按钮，您仍然可以隐藏qtips。

然而，当使用cytoscape时，这似乎不起作用。单击其他位置时，将触发隐藏事件。

cy.elements().qtip({
    content: function(event, api){
        api.set('content.button', true);
        return 'Example qTip on ele ' + this.id();
    },
    position: {
        my: 'top center',
        at: 'bottom center'
    },
    hide: false,
    style: {
        classes: 'qtip-bootstrap',
        tip: {
            width: 16,
            height: 8
        }
    }

    events: {
              hide: function(event, api){
                 console.log(event);
              }
    }
});

我可以阻止隐藏事件跟随event.preventDefault()，但这也会阻止关闭按钮隐藏事件，这有点乱。

任何想法，虽然它的行为方式如此？

Answer 1

如果你需要，这里有快速和肮脏的工作（仅关闭按钮关闭）：

    events:{
            hide: function(event, api){


                    if(event.originalEvent.target.parentElement.parentElement.id != this[0].id){
                        event.preventDefault();
                    }

    }

<强>解释

任何鼠标点击都会触发隐藏事件所有可见的qtips。
我们看一下鼠标点击（event.originalEvent.target.parentElement.parentElement.id）的目标，看它当前试图关闭的qtip的关闭框。如果不是那么我们preventDefault()。

这可能是非常好的床性能，因为它会在每次点击鼠标时为每个打开的qtip运行这些preventDefault()。

Answer 2

请记住，因为这会将Qtip包装在非DOM元素上，所以必须绑定到Cytoscape图元素。这些绑定在DOM之外且在Qtip控件之外（例如，the hide case）。

您是否尝试将隐藏事件设置为空字符串""？

Answer 3

我发现最干净的解决方案是为hide事件提供一个垃圾事件。

使用<div class="form-group"> <div class="col-md-6"> <div class="box select-box item-list"> <ul id="sortable-listAllColumns" style="min-height: 100px;"> <li>Item 2</li> <li>Item 3</li> </ul> </div> </div> <div class="col-md-6"> <div class="box select-box seleted-item"> <ul id="sortable-listSelectedColumns" style="min-height: 100px;"> </ul> </div> </div> </div> $(document).ready(function () { $("#sortable-listAllColumns").kendoSortable({ connectWith: "#sortable-listSelectedColumns", placeholder: placeholder }); $("#sortable-listSelectedColumns").kendoSortable({ connectWith: "#sortable-listAllColumns", placeholder: placeholder, cancel: onCancel, move: onMove }); });，null或false似乎都不起作用。

""

防止隐藏为cytoscape qtip

3 个答案: