javascript - Jssor 列表 slider 和 X-Editable

Question

我有一个 Jssor 列表 slider ，我想使用 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，但我确实找到了一种解决方法，允许通过单击 slider 容器外部的另一个元素来激活可编辑元素。在体内:

$(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>

如果跨度位于 slider 容器之外，则单击 teSTLink 会按预期运行并打开弹出编辑器输入字段，但一旦将其放置在 slider 内:

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

...没有任何反应。我查找了您突出显示的函数，并认为我找到了您所说的“ContentClickEventHandler”，但清除此函数并没有解决问题。

再次感谢您的帮助，并感谢您向我这样的人发布了这个精彩的产品:D

Answer 1

请尝试以下 3 种方法。

1. 我猜 X-Editable 检测到 click 事件以使元素可编辑。如果您可以修改该库，请将事件从 click 更改为 mousedown。

2. 不确定是否有效，请尝试一下。为链接元素添加 nodrag="true"。

3. 打开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) {
   }