Jssor 列表滑块和 X-Editable答案

【问题标题】：Jssor list-slider and X-EditableJssor 列表滑块和 X-Editable
【发布时间】：2015-04-12 22:38:38
【问题描述】：

我有一个 Jssor 列表滑块，我想使用 X-Editable 使缩略图文本可编辑： example

这两个函数在页面上与单独的元素一起工作，但我找不到使链接文本变为可编辑的方法。没有错误，文本元素根本不显示弹出的可编辑框。

我认为这是因为 class="t" 声明通知 Jssor 控制拇指 div 干扰 X-editable 尝试执行相同操作。 X-Editable 要求将可编辑文本包裹在元素中：

<a href="#" id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</a>

但这似乎受到 Jssor 的干扰。谁能指出我正确的方向？

-----------------已更新以响应答案------------------

感谢您抽出宝贵时间帮助我 :) 我无法在 x-editable 库中将默认行为从 on click 更改为 onmousedown，但我确实找到了一种解决方法，允许通过单击滑块容器外部的另一个元素来激活可编辑元素。体内：

$(document).ready(function() {
    $.fn.editable.defaults.mode = 'popup';
    $('#doit').click(function(e){
        e.stopPropagation();
        $('#username').editable({
            send: 'never',  
            title: 'Enter text',
            placement: 'right',
            toggle: 'manual',
            display: function(value) {
                $('#username').text(value);
        }
    });
    $('#username').editable('toggle');

    });
});

...和元素：

<span id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</span>
<a id="doit" href="#">testlink</a>

如果跨度在滑块容器之外，单击 testlink 会按预期运行并打开弹出式编辑器输入字段，但一旦将其放置在滑块内：

<div class="t">
    <span id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</span>
</div>

...没有回应。我查找了您突出显示的功能，并认为我找到了您的意思，“ContentClickEventHandler”，但清除此功能并没有解决问题。

再次感谢您的帮助，感谢您将这款出色的产品发布给像我这样的人：D

【问题讨论】：

标签： javascript jquery jssor x-editable

【解决方案1】：

请尝试以下 3 种方法。

我猜X-Editable 检测到click 事件以使元素可编辑。如果可以修改库，请将事件从click更改为mousedown。
不确定它是否有效，请尝试一下。为链接元素添加nodrag="true"。

打开jssor.slider.js，替换

function SlidesClickEventHandler(event) {
    if (_LastDragSucceded) {
        $Jssor$.$StopEvent(event);

        var checkElement = $Jssor$.$EventSrc(event);
        while (checkElement && _SlidesContainer !== checkElement) {
            if (checkElement.tagName == "A") {
                $Jssor$.$CancelEvent(event);
            }
            try {
                checkElement = checkElement.parentNode;
            } catch (e) {
                // Firefox sometimes fires events for XUL elements, which throws
                // a "permission denied" error. so this is not a child.
                break;
            }
        }
    }
}

与

function SlidesClickEventHandler(event) {
}

【讨论】：