标签: javascript-events

背景:我正在创建一个让人联想到whenisgood.net的表,因为它具有click-n-drag切换表元素.当左,中,右鼠标按钮激活mousedown事件时,我想调用不同类型的切换代码.

通过使用JQuery,我有一个良好的开端.

$(".togglable").bind("contextmenu", function() {return false;});
$(".togglable").bind("mousedown", function(e){
  e.preventDefault();
  toggle(this, e);
});

在toggle()我可以e.which用来确定点击了什么按钮的函数中.

妙语:我用e.preventDefault()希望将停止滚动的中间点击默认行为.它没有.我该怎么做才能阻止滚动动作激活？

另请参阅"使用中键单击触发onclick事件"

我试图理解node.js中addListener的目的.有人可以解释一下吗？谢谢!一个简单的例子是:

var tcp = require('tcp');
var server = tcp.createServer(function (socket) {
  socket.setEncoding("utf8");
  socket.addListener("connect", function () {
    socket.write("hello\r\n");
  });
  socket.addListener("data", function (data) {
    socket.write(data);
  });
  socket.addListener("end", function () {
    socket.write("goodbye\r\n");
    socket.end();
  });
});
server.listen(7000, "localhost");

我正在编写自定义滚动条并正在捕捉鼠标滚轮事件.我正在使用它然后调整我想要滚动的元素的scrollTop.

是否有标准数量的像素向下滚动,或者它是否因系统而异？

我在最新版本的Firefox中展示了114px:

这与IE9相比令人沮丧.此代码适用于IE7/8,但不适用于9.

document.getElementById('id').fireEvent("OnChange");

任何洞察力为什么？

我有一个类(或者包含函数的对象;我听说没有Javascript类这样的东西)叫做Foo,它有一个附加到click事件的事件处理程序.当调用事件处理程序时,我想修改我的类Foo的属性.通常,我会使用this关键字,但在事件处理程序中,this引用设置为对html元素的引用.这是我的代码:

function Foo() {

    this.num=0;
    $('element').click(this.eventHandler);// jQuery to attach an onclick event to my element.

    this.eventHandler=function() {
        this.num++;// This doesn't work.
        // Normally, "this" would refer to my instance of Foo,
        // but as an event handler, "this" refers to the html element.
    }
}

所以我的问题是:如何在我的事件处理程序中引用我的Foo实例,以便我可以修改其属性(如num)？

作为jQuery和AJAX基础知识的新手,我一直在尝试设置一些相当简单的动态加载.

我包含一个设置click事件处理程序的.js文件,它看起来像这样:

var baseurl = document.getElementById("baseurl").getAttribute("href");
var pattern = new RegExp("[^/]+");
var page = "cnt/" + pattern.exec(window.location.href.substr(baseurl.length)) + ".php";

$(document).ready(function(){
    $('a.ajax').bind('click',function(event){
        event.preventDefault();
        $('#content').load("cnt/" + pattern.exec(this.href.substr(baseurl.length)) + ".php")
    })
});

请注意,我对文件进行了一些更改,因此相对href"testing /"将变为文件"cnt/testing.php"的绝对路径.

我的锚标签看起来像这样:

<a href="testing/" class="ajax">Link to testing page</a>

我的问题是,无论何时将新内容加载到div#content中,我的.js文件中的处理程序都不会注册任何可能使用AJAX出现的链接.换句话说,链接将简单地充当普通的锚标签.我希望它使用AJAX加载下一页,就像它与第一页一样.

我正在尝试为对象创建一个事件让它听它.请考虑以下示例:

var moon;

moon = document.createEvent("Event");
moon.initEvent("Event",true,true);

var Dog = function (name) {
  this.name = name;

  document.addEventListener("Event",this.bark,false);
};
dog.prototype.bark = function() {
  console.log(this.name + ': Awooooooof Woof!');
};


var spot = new Dog("Spot");
var dot = new Dog("Dot");


//invoke
document.dispatchEvent(moon);

我期待收到如下输出:

Spot: Awooooooof Woof!

Dot: Awooooooof Woof!

但我得到的是:

undefined: Awooooooof Woof!

我的例子出了什么问题？如何注册每个Dog实例的监听器？提前致谢!

对于Ajax应用程序,我反复使用jQuery的html()方法来更新DOM容器(覆盖HTML内容,然后将元素绑定到事件侦听器).

附加到被破坏内容的事件侦听器是否被jQuery正确删除,或者存在内存泄漏的风险？(这里已经有一些相关问题,但我找不到答案).

为什么单击男性单选按钮不起作用？

<div id="m_wrapper">
    <input id="m" type="radio" name="sex" value="male" />Male<br>
</div>
    <input id="f" type="radio" name="sex" value="female" />Female
    <input id="o" type="radio" name="sex" value="other" />Other


$("#m_wrapper").click(function(e){
    $("#m").prop('checked', true); 
    return false;
});

我知道 - > return false is equivalent to call e.preventDefault() AND e.stopPropagation()

但是,当我单击单选按钮时,我有一个显式行设置,对于Male单选按钮,该属性选中为true.为什么preventDefault()将就UNDO事我设置？

顺便说一句,点击里面'm_wrapper'的任何地方都会检查单选按钮.这是有道理的.

我知道删除return false将解决问题.问题是'为什么？'

$("#m_wrapper").click(function(e){
    $("#m").prop('checked', true); 
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div id="m_wrapper">
    <input id="m" type="radio" name="sex" value="male" />Male<br>
</div>
    <input id="f" type="radio" name="sex" value="female" />Female
    <input id="o" type="radio" name="sex" value="other" …

我正在使用Polymer构建一个材料Web应用程序,我想在页面上获取图像的主要和次要颜色.我正在使用该on-click事件来触发一个函数,该函数从图像中检索数据并获取颜色.问题是该功能工作正常,除了实际参考图像 - ColorThief似乎无法"看到"图像.这是我的代码:

图片:

<img style="opacity: 0;position: absolute;top:-100px;left:-100px;" width="1" height="1" data-albumno="{{i}}" src="{{root}}{{a.image}}" on-load="{{colorthis}}">

而colorthis功能:

Polymer('paper-albums', {
    colorthis: function(event, detail, sender) {
        var i = sender.dataset.albumno,
                cT = new ColorThief(),
                pallete = cT.getPalette(event.target, 2);

        //code to handle the pallete//
    }
});    

我相信这event.target就是问题所在; 我也尝试过使用sender,但这也没用.我会在这里提到图像？

我也尝试在Javascript中创建图像而不将其放入DOM中,但无济于事.这似乎是一项简单的任务,但事实证明它要复杂得多(至少对我而言).可能有一种更好的方式,我错过了.