标签: javascript-events

据说当我们处理"click事件"时,返回false或调用event.preventDefault()会产生影响,其中

不同之处在于,preventDefault只会阻止默认事件操作发生,即链接点击,表单提交等页面重定向,返回false也会阻止事件流.

这是否意味着,如果click事件已针对多个操作多次注册,请使用

$('#clickme').click(function() { … })

return false会阻止其他处理程序运行吗？

我现在在Mac上,所以只能使用Firefox和Chrome,而不是IE,它有不同的事件模型,并通过添加3个处理程序在FF和Chrome上进行测试,并且所有3个处理程序都没有停止运行.... 那么真正的区别是什么,或者,是否存在"阻止事件流动"的情况？

这与...有关

使用jQuery的animate(),如果点击的元素是"<a href="#" ...> </a>",该函数应该仍然返回false？

和

e.preventDefault()之间的区别是什么？并返回false？

我event.stopPropagation()在我的应用程序中使用.然而,已经出现了一种情况,我希望传播继续,好像上面的函数从未被调用过一样.所以我想知道; 有没有办法在它被停止后"恢复"传播？将一次调用移动event.stopPropagation到十几个单独的条件语句会非常繁琐.

我试图找出如何在未选中复选框时调用javascript函数.

这是我的复选框:

<input type="checkbox" id="icd" name="icd" value="icd" />

这是函数的名称:

planhide();

谢谢!

有没有办法让客户端只使用JavaScript将HTML格式的文件(例如.txt或.csv格式)作为字符串上传到JavaScript变量？如果是这样,你能提供一个简单的例子吗？我不想使用任何PHP.

提前致谢!

文档中有2个脚本

// my_script.js goes first
document.onclick = function() {
    alert("document clicked");
};

// other_script.js comes after
// this overrides the onclick of my script,
// and alert will NOT be fired
document.onclick = function() {
    return false;
};

为了确保我的click事件不会被其他脚本覆盖,我切换到了addEventListener.

// my_script.js goes first
document.addEventListener("click", function() {
    alert("document clicked");
}, false);

// other_script.js comes after
document.addEventListener("click", function() {
    return false;
}, false);

现在我又得到了一个问题.由于return false在第二个代码之后定义alert,为什么不阻止警报被调用？

如果我希望我的脚本能够完全控制click事件(比如忽略其他脚本中定义的事件一直返回false),该怎么办？

的jsfiddle

<div class='wrapper'>
    <button class='child'>Click me</button>
</div>

function h(e) {
    e.preventDefault();
    e.stopPropagation();
    e.stopImmediatePropagation();
    alert(e.type);
    return false;
}

document.querySelector('.wrapper').addEventListener('mouseup', h, false);
document.querySelector('.child').addEventListener('click', h, false);

我希望这可以防止"点击"事件被触发,但事实并非如此.但是,更改mouseup为mousedown确实会阻止click事件.

我也尝试将useCapture参数设置为true,这也不会产生所需的行为mouseup.我在Chrome和Firefox上测试了这个.在我提交错误之前,我想我会问这里.

这是当前浏览器中的错误,还是记录的行为？

我已经回顾了W3C标准(DOM级别2),我无法找到任何可以解释这种行为的东西,但我可能错过了一些东西.

在我的特殊情况下,我试图解耦两个侦听同一元素上的事件的代码,我认为在优先级的部分使用捕获事件将是解决这个问题的最优雅的方法,但后来我跑了陷入这个问题.FWIW,我只需支持官方支持的FF和Chrome版本(包括FF的ESR).

考虑以下示例代码:

<span>
    <input type="checkbox">
</span>

$('span').click(function(e) {
    e.preventDefault();
    $(':checkbox')[0].checked = true;
});

小提琴

据我所知,这应该发生:

• preventDefault()应该阻止浏览器的默认行为检查复选框,即使事件处理程序附加在DOM层次结构的上方.这部分工作正常.
• 设置.checked = true应该起作用,我相信它应该独立于浏览器对我已取消的事件的默认操作.这部分看起来很麻烦,好像它preventDefault()正在影响它 - 删除preventDefault()它并按预期工作.

复选框始终未选中的实际原因是什么？

我已经在Chrome 33和Firefox 27上进行了测试,所以这似乎不是一个浏览器错误.

这个问题主要是由于好奇心扩展我的DOM /事件模型知识.我不想要解决方法,而是想知道为什么这个例子失败了.

我正在创建出现在屏幕顶部的菜单.当用户点击其中一个菜单项div时会出现很多链接.我不能通过点击另一个菜单项(没问题,已经实现它)来隐藏这个div,而且还可以点击其他任何地方然后点击这个div和menuitems.

我听说过两个解决方案:

• 显示菜单后面的隐形div并覆盖整个屏幕并为其添加单击处理程序.
• 将事件处理程序附加到document.body.

第一个对我不好,因为该div将覆盖页面上的链接,我希望它们即使在点击menuitem后也可以点击,并且它出现了相应的div.所以我尝试了第二次灵魂.但问题是在我的组件的处理程序之前触发了body上的jquery click处理程序.我不知道如何让它首先调用我的组件处理程序,然后阻止事件传播.

这是代码和js小提琴:

/** @jsx React.DOM */
var Menu = React.createClass({
    click: function(e) {
        console.log('component handled click - should be called before jquery one and prevent jquery handler from running at all');
        e.stopPropagation();
    },
    render: function(){
    console.log("component renders");
        return (
            <div>
                <div>| MenuItem1 | MenuItem2 | MenuItem 3 |</div>
                <br />
                <div className="drop">
                    MenuItem 1 (This div appears when you click menu item)
                    <ul>
                        <li><a href="#" onClick={this.click}>Item 1 - when I click this I don't want …

我把一个mouseleave和一个mouseenter事件附加到一个容器上.这个容器包含一个选择和一些随机文本,我将鼠标放在容器上,然后点击选择,这是Chrome和IE 10上发生的情况:

Chrome:没有触发mouseleave(这就是我想要的)

IE 10:触发​​mouseleave(坏,坏)

可以在这里找到演示

我正在寻找一种交叉浏览解决方案,只有当我的鼠标没有悬停在容器及其子容器上时才会触发事件.

我想在TypeScript中进一步重写JavaScript"方法".我很想在课堂上这样做,像这样:

// export default class 
export default class GroupItemMetadataProvider1
{
    protected m_instance;
    protected _grid;
    protected _defaults;

    protected m_options;
    constructor(options)
    {
        this.m_instance = this;

        this._defaults = {
            groupCssClass: "slick-group",
            groupTitleCssClass: "slick-group-title",
            totalsCssClass: "slick-group-totals",
            groupFocusable: true,
            totalsFocusable: false,
            toggleCssClass: "slick-group-toggle",
            toggleExpandedCssClass: "expanded",
            toggleCollapsedCssClass: "collapsed",
            enableExpandCollapse: true,
            groupFormatter: this.defaultGroupCellFormatter,
            totalsFormatter: this.defaultTotalsCellFormatter
        };

        options = $.extend(true, {}, this._defaults, options);
        this.m_options = options;
    }


    protected defaultGroupCellFormatter(row, cell, value, columnDef, item)
    {
        if (!this.m_options.enableExpandCollapse)
        {
            return item.title;
        }

        let indentation = item.level * 15 + "px"; …