标签: jquery-events

有没有办法阻止$(window).scroll()在页面加载时触发？

在Firefox 4中测试以下代码,即使拔下鼠标,它也会触发.

jQuery(document).ready(function($){    
$(window).scroll(function(){
                console.log("Scroll Fired");
    });
});

试图在HTML5中做一个简单的拖放示例 - 但是当我将图像放入div元素时,我得到以下错误.

未捕获的TypeError:无法设置null的属性'innerHTML'

所以我假设错误消息意味着dragElement为null.我不明白为什么,因为我在dragstart事件中将它设置为img元素的HTML.

有谁知道如何使这项工作？

var dragElement = null;

$('#x').bind('dragstart', function (e) {
    dragElement = this;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.innerHTML);
});

$('#drop-box').bind('dragover', function (e) {
    e.preventDefault();
    return false;
});

$('#drop-box').bind('drop', function (e) {
    e.preventDefault();
    if (e.stopPropagation) {
        e.stopPropagation();
    }

    if (dragElement != this) {
        dragElement.innerHTML = this.innerHTML;
        this.innerHTML = e.originalEvent.dataTransfer.getData('text/html');
    }

    return false;
});

我正在使用其上定义了单个模态的页面("#agenda-modal").当点击一个触发器(.agenda-item)时,我正在显示这个带有远程内容的模态,如下所示:

$("body").on("click", ".agenda-question", function(e){
  var url = <build my url here>;
  $("#agenda-modal").modal({
    remote: url
  });
});

这很好用(我正在使用$ body.on,因为.agenda-items是通过javascript添加的).

当模态关闭时,我想重新加载页面的一部分(模态内部的表单修改的部分).所以我正在使用:

$("#agenda-modal").on("hidden", function(){
  alert("hidden");
});

当然,一切都包括在内

$(function() {...});

这有效,但只有一次!当我第一次加载页面并单击触发器时,模态会加载,当我关闭模式时,警报就会发生.如果我再次点击相同的触发器,模态会再次显示,但这次关闭警报时不会发生!

我不知道,但这是因为听众 - ("隐藏",功能......) - 不再"束缚"了吗？我想.on会永远抓住这个事件吗？

模态的代码是直接推特:

<div class="modal hide fade" id="agenda-modal">
  <div class="modal-body"></div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal">Close</button>
  </div>
</div>

有任何想法吗？我真的想在模式关闭时捕获,以便我可以更新本来会被更改的页面部分.

使用rails btw,不确定是否重要......

我正在为iPad开发一个javascript/html5项目.

我需要能够捕获一个元素上的touchmove事件,该元素DOM在touchstart事件被触发后直到事件发生之后才被添加到该元素(即直到一个人将手指放在屏幕上之后).

我试过模拟一个touchstart事件并以编程方式触发它...

$( "#container" ).append( element );
element.on( "touchmove", doStuff );
var ev = $.Event( "touchstart" );
element.trigger( ev );

......但这不起作用.我可以doStuff开始射击的唯一方法是抬起手指,然后再次触摸屏幕,触发第二个touchstart事件.

如何在屏幕上已经touchmove添加到DOM手指之后的元素上捕获事件？

红色方块是具有"父级"类的容器的一部分.如果我将鼠标悬停在该红色方块上,它就会消失.但为什么？我预计它不应该.

预期的行为:它不会消失,因为红色方块是".parent"容器的一部分,我已经明确指出,mouseout事件发生在该容器上.

有人建议,这个问题是重复的

带有子元素的JavaScript mouseover/mouseout问题

在某种程度上 - 是的,但我认为这个问题提供了价值,因为它不仅提供了解决方案("你可以尝试这个"),而且还解释了为什么你应该使用它以及为什么初始解决方案不能正常工作,因为它是应该.

<span class="parent">Hover mouse over this text<br></span>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
    function removeSquare()
    {
        $(this).find(".kvadrat").remove();
    }

    function addSquare()
    {
        $(this).append("<span style='display:inline-block;width: 50px;height: 50px;background-color:red' class='kvadrat'></span>");
        $(this).on("mouseout", removeSquare);
    }
    $(".parent").on("mouseover", addSquare);
</script>

我正在尝试使用 Javascript for Mobile Safari 模拟滚动事件。我正在使用以下代码

var evt = document.createEvent("MouseEvents");    
evt.initMouseEvent("scroll", true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null);

上面的代码是一个jQuery插件jQuery.UI.Ipad的一部分基本上映射触摸事件等touchstart，touchmove，touchend像鼠标事件mouseover，mousedown等

但是由于某些原因，模拟滚动事件的代码不起作用......请帮助我。所以基本上我的问题是如何模拟滚动事件。

在网页上是带有点击和/或按键处理程序的元素。如果我添加一个新的，它将在它们之后执行。我需要一种方法来添加一个新的回调，它被添加到事件处理程序列表中，以便预先执行。jQuery 怎么可能呢？

更新

为什么我不能只使用 jQuery 的 unbind 方法？我正在将我的 jQuery 代码注入任何网页，因此我不知道是否使用了任何 JavaScript 框架以及使用了哪个 JavaScript 框架。我需要一种通用的方法来检测事件处理程序并预先添加我的。（在您提问之前，我正在构建一个“记录器”应用程序，用于跟踪用户操作以存储它们并在以后执行它们。）

更新 2

我只使用 Firefox，不需要兼容 IE。我必须等待页面完全加载，然后我的 jQuery 脚本将被调用。

一直没能得到这个工作。无需了解我的具体情况以及我为什么要做我正在做的事情，基本摘要是：

我在父元素中有 4 个元素子元素。我目前正在mouseenter给孩子们附加一个：

$('.parent').on('mouseenter', '.child', function() {
    showSomething();
});

然后我想说

$('.parent').on('mouseleave', function() {
    hideSameSomething();
});

但是当mouseenter孩子向mouseleave父母发射 a 并产生令人讨厌的闪烁时。我尝试e.stopPropagation()过使用儿童处理程序，但没有成功。有什么想法如何mouseleave在我输入子元素时并且仅在我真正离开父元素时不触发父事件？

我已经设置了一个mousemove处理程序来拖动元素。但是，如果您移动光标太快，它就会失去对该元素的跟踪，并且不会再移动它，直到您将光标重新移到该元素上。

这是一个 JSFiddle演示。

为什么要这样做？

 $this.on("mousemove.partmove touchmove", function(e){
     e.preventDefault();
     var moveL = e.clientX; 
     var moveT = e.clientY;
     console.log("mov " + (moveT-vOffset) );
     $this.css({"left": moveL-hOffset, "top": moveT-vOffset});
 });

最终,我想在单击图像时切换选择下拉列表.我想利用自定义jQuery库中定义的"打开/关闭"功能,但无法弄清楚如何访问"打开"功能.

问题:如何访问自定义jQuery库中定义的"打开"或"关闭"函数？(更多细节如下 - 请注意,我没有使用jQuery Prototypes的经验,这是这个问题的一个重要部分 - 我甚至不确定我是否可以正确访问该对象.)

任何帮助/建议或指导表示赞赏

我正在使用Codrops Simple Effects for Dropdowns文章作为参考.

具体来说,我在我的示例/问题中引用了演示#4.

该示例使用自定义jQuery库来设置样式/动画下拉列表:

• 这是代码仓库(SimpleDropDownEffects)
• 这是原始代码(jquery.dropdown.js)

这很简单:

1. 首先,您将布置HTML"选择"(下拉)标记

   <select id="cd-dropdown" class="cd-select">
       <option value="-1" selected>Choose an animal</option>
       <option value="1" class="icon-monkey">Monkey</option>
       <option value="2" class="icon-bear">Bear</option>
       <option value="3" class="icon-squirrel">Squirrel</option>
       <option value="4" class="icon-elephant">Elephant</option>
   </select>
   

   Run Code Online (Sandbox Code Playgroud)

2. (包括所有必要的项目文件后)您可以调用您的插件功能

   $( '#cd-dropdown' ).dropdown();
   

   Run Code Online (Sandbox Code Playgroud)

3. 然后,该函数将我们的"选择"标记转换为以下结构

   <div class="cd-dropdown">
       <span>Choose an animal</span>
       <input type="hidden" name="cd-dropdown">
       <ul>
           <li data-value="1"><span class="icon-monkey">Monkey</span></li>
           <li data-value="2"><span class="icon-bear">Bear</span></li>
           <li data-value="3"><span class="icon-squirrel">Squirrel</span></li>
           <li data-value="4"><span class="icon-elephant">Elephant</span></li>
       </ul>
   </div>
   

   Run Code Online (Sandbox Code Playgroud)

4. 然后该函数响应其文档中指定的click事件:

单击第一个跨度时,我们将"cd-active"类应用于其父级,即"cd-dropdown"类的分区.选择选项时,相应的范围将插入第一个范围.

接下来,jquery.dropdown.js文件 …