小编ist*_*men的帖子

jQuery UI可排序容差选项无法按预期工作

以下是该选项的jQuery UI文档中的部分tolerance:

这是重新排序在拖动过程中的行为方式.可能的值:'intersect','pointer'.在某些设置中,"指针"更自然.

相交:draggable重叠至少50%的droppable

默认值是intersect,但是如果鼠标指针不在可排序项目之上,则排序不会发生,无论被拖动元素是否比其他可排序项目至少高50%(我期望的功能)这在演示页面上发生好(上面链接)

这是jQuery UI中的错误,还是我理解错了？

jquery jquery-ui jquery-ui-sortable

ist*_*men

2012 05-17

14
推荐指数

3
解决办法

7927
查看次数

窗口焦点和模糊事件在Android浏览器上无法正常工作

我发现当连接到窗口,文档或正文时,javascript焦点和模糊事件在Android浏览器上无法正确触发.

我想要一个在桌面浏览器上正常工作的简单测试脚本,但在Android股票浏览器,Dolphin和Opera mobile上都失败了:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>Focus test</title>

    <script type="text/javascript">

        window.onfocus = function() {
            document.getElementById('console').innerHTML += '<div>Focus event handler fired.</div>';
        };
        window.onblur = function() {
            document.getElementById('console').innerHTML += '<div>Blur event handler fired.</div>';
        };

    </script>
</head>

<body>
    <input id="test" name="test" />
    <div id="console"></div>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

有趣的是,如果表单输入正在获得焦点,则事件处理程序将触发,并且在模糊时,模糊事件处理程序将触发两次.

有没有人有一个很好的解决方案或解决方法？

编辑:预期的结果是,如果我更改浏览器选项卡,或更改为另一个应用程序,模糊事件应该触发,如果我回到浏览器选项卡,焦点事件应该触发(这是它在桌面上的工作原理) )

javascript android onfocus onblur dom-events

ist*_*men

2019 08-14

12
推荐指数

1
解决办法

5917
查看次数

在iOS8 Safari中,只读输入处理不正确

在Safari,iOS8中,聚焦日期或时间输入可打开日期或时间选择器,并允许编辑只读输入的内容.

当聚焦在文本输入中时,底部会显示一个工具栏,其中包含上一个,下一个和完成按钮,在点击"完成"或点击页面上的其他输入之前不会消失.

当输入以编程方式从Javascript聚焦时,没有任何事情发生,但是:如果将touchstart事件监听器添加到页面的某个部分,则触摸任何地方都会显示日期,时间选择器或工具栏,即使监听器为空.

示例代码:

<input id="test1" readonly />
<input id="test2" type="date" readonly />
<input id="test3" type="time" readonly />

<script>
    document.getElementById('test1').focus();
    window.addEventListener('touchstart', function () {});
</script>

Run Code Online (Sandbox Code Playgroud)

实例:http://jsfiddle.net/cw3hump4/embedded/result/

关于如何避免这种情况的任何想法或解决方法？

更新:

出于可用性/可访问性的原因,我需要进行焦点管理:点击输入会打开一个对话框,当对话框关闭时,我将焦点重新放在输入上.输入必须是只读的,以防止软键盘/日期选择器/时间选择器弹出,但不能被禁用,所以我可以设置一个值,并专注于它.

html javascript mobile-safari ios ios8

ist*_*men

2014 09-19

8
推荐指数

1
解决办法

8670
查看次数

透明叠加div允许IE 7,8中的点击槽

我有一个包含表单元素的div,我使用的是一个隐形覆盖面膜,它应该覆盖我的容器.但没有背景IE 7和8(错误地)允许点击槽.

我发现的解决方案是在叠加div上使用0.1不透明度的背景颜色.这部分有效,但在我的情况下,容器元素是可排序的项目,当我开始排序时,表单元素表现得很奇怪(只有当我在jquery sortable上使用opacity选项时)

样品加价:

<div class="sort">
    <div class="cont">
        <div class="mask"></div>
        <label for="test">Test</label>
        <input type="text" value="Some" name="test" id="test" />
    </div>
    <div class="cont">
        <div class="mask"></div>
        <label for="test">Test</label>
        <select value="Some" name="test2" id="test2">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </select>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

CSS:

.cont {
    width: 300px;
    position: relative;
    background-color: #aaa;
    padding: 10px;
    margin: 10px;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0.1;
    filter: alpha(opacity=0.1);
}

Run Code Online (Sandbox Code Playgroud)

使用Javascript:

$(function() {
    $('.sort').sortable({opacity:0.8});
});

Run Code Online (Sandbox Code Playgroud)

住在http://jsfiddle.net/CmU59/4/

还有其他解决方法吗？

css jquery overlay internet-explorer-8 internet-explorer-7

ist*_*men

lucky-day

5
推荐指数

3
解决办法

5764
查看次数

查找元素的可滚动容器，包括在影子 DOM 中

我正在寻找一个通用的解决方案来查找元素的可滚动容器（我想监听滚动事件）。正常的方法是在 DOM 树中向上遍历检查父元素，直到其中一个元素可滚动 -这里有一些类似的解决方案。然而，如果 Shadow DOM 也在图片中，这将会失败。

这是一个示例结构：

<app-home>
  <ion-content>
    #shadow-root
      <div class="inner-scroll">
        <slot>
          -> <my-element> (reveal)
        </slot>
      </div>
    <my-element>...</my-element>
  </ion-content>
</app-home>

Run Code Online (Sandbox Code Playgroud)

在上面的示例中，可滚动元素是.inner-scroll，它位于的 Shadow dom 内ion-content。由于my-element通过进入容器slot，向上遍历树将永远不会到达滚动容器（my-element-> ion-content-> app-home）。

我发现它ion-content有一个getScrollElement方法，可以在这种特定情况下使用，但是我想知道是否有一个基于通用 DOM 的解决方案，因为我希望它无论上下文如何都能工作。

更新：

更清楚地说，我希望my-element成为一个独立的、可重用的组件，它可以找到它的滚动容器，无论它放在哪里。我发现，内置scrollIntoView方法适用于 DOM 元素，并且它滚动正确的容器，这意味着浏览器以某种方式找出它，但不会公开返回滚动容器的方法。

另一个想法是在更高级别上侦听滚动事件，而不知道确切的元素，但这也不起作用，因为滚动事件不会传播。

有任何想法吗？

javascript dom shadow-dom ionic4

ist*_*men

2019 02-15

5
推荐指数

1
解决办法

1987
查看次数

Firefox Mobile:使用translate3d设置动画的元素从父容器流出

我有一个元素,我使用translate3d转换.父元素有overflow: hidden,但在动画期间在Firefox Mobile 19.0.2上,动画元素在父元素之外是可见的.

动画top属性而不是translate3d工作,但它不是硬件加速,它不够平滑.

它适用于我测试的所有其他移动和桌面浏览器.

我想这是一个Firefox Mobile漏洞,但有没有人有解决方法呢？

以下是用于测试的jsfiddle链接:http://jsfiddle.net/dioslaska/6h8qe/

最小的测试用例:

HTML:

<div id="cont">
    <div id="translate">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
    </div>
</div>

Run Code Online (Sandbox Code Playgroud)

CSS:

#cont {
    width: 50px;
    height: 90px;
    border: 1px solid black;
    margin: 20px;
    overflow: hidden;
}

#translate {
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
}

#translate.a {
    -webkit-transform: translate3d(0, -60px,0);
    -moz-transform: translate3d(0, -60px,0);
}

#translate div {
    height: 30px;
    line-height: 30px;
    text-align: …

Run Code Online (Sandbox Code Playgroud)

firefox mobile android css3 translate3d

ist*_*men

2014 02-24

3
推荐指数

1
解决办法

2046
查看次数