标签: javascript-events

我正在尝试创建一个jQuery特殊事件,当绑定的内容发生更改时触发该事件.我的方法是使用setInterval检查内容,并检查内容是否从上次更改.如果你有更好的方法,请告诉我.另一个问题是我似乎无法清除间隔.无论如何,我需要的是使用event.special检查内容更改的最佳方法.

(function(){

    var interval;

    jQuery.event.special.contentchange = {
        setup: function(data, namespaces) {
            var $this = $(this);
            var $originalContent = $this.text();
            interval = setInterval(function(){
                if($originalContent != $this.text()) {
                    console.log('content changed');
                    $originalContent = $this.text();
                    jQuery.event.special.contentchange.handler();
                }
            },500);
        },
        teardown: function(namespaces){
            clearInterval(interval);
        },
        handler: function(namespaces) {
            jQuery.event.handle.apply(this, arguments)
        }
    };

})();

并绑定它像这样:

$('#container').bind('contentchange', function() {
        console.log('contentchange triggered');
});

我得到console.log'内容已更改',但没有得到console.log'内容更改已触发'.所以很明显,回调永远不会被触发.

我只是使用Firebug来更改内容并触发事件,以测试它.

更新
我认为我不够清楚,我的代码实际上没有用.我正在寻找我做错的事.

这是任何感兴趣的人的完成代码

(function(){

    var interval;

    jQuery.event.special.contentchange = {
        setup: function(){
            var self = this,
            $this = $(this),
            $originalContent = $this.text();
            interval = setInterval(function(){ …

这是我基本上的:

<a href="http://somelink.com">
    <span>stuff</span>
    <span onclick="AwesomeFunction();">more stuff</span>
    <span>the last stuff</span>
</a>

现在,问题是我想将父级保持为链接,但如果用户使用onclick事件单击跨度,我不希望浏览器遵循该链接.

我试过了

event.stopPropagation();

但这似乎只是停止了点击onclick事件,或者我做错了什么.

我目前处于紧缩模式,我不想花太多时间重写生成这个HTML的代码,但它仍然不能成为一个黑客,因为它是在一个非常重要的网站功能中实现的.任何帮助赞赏.

我是Javascript和jQuery的新手.我想单击一个按钮并执行js功能.(对于这个例子,它只是一个警报,但它实际上是一个ajax函数.)

出现第一个警报,但是在我单击按钮后,我从未看到第二个警告("已做")警报.看起来javascript不认为单击按钮时定义了doIt()函数.

这是相关的代码:

$(document).ready(function()
{ 
    alert('ready');

    function doIt() {
        alert('did it');
    };
}
)

<body>
    <input name="Go" type="button" value="Go" onclick="doIt();"/>
</body>

我正在创建一个地图编辑webapp,我们可以创建和编辑折线,多边形等.我在网上找到关于撤消实现的信息时遇到了麻烦,我发现抱怨"我们需要撤消"和"这是我的命令模式使用关闭"但我认为在那个和完整的撤销/重做界面之间有相当一些道路.

所以,这是我的问题(我认为维基的好候选人):

• 我应该管理堆栈,还是有办法将我的命令发送到浏览器的堆栈？(以及如何处理本机命令,例如本文中textifields中的文本编辑)
• 当某些命令是浏览器本机时,如何处理"命令压缩"(命令分组)
• 如何检测撤消(ctrl + z)击键？
• 如果我注册了一个keyup事件,我该如何决定是否阻止默认？
• 如果没有,我可以在某处注册一些不相关的处理程序吗？
• 用户不习惯在网上撤消,我如何"训练"他们在我的应用程序上进行探索/撤消？

谢谢大家.

我发现删除键不会keypress在Chrome中触发事件,而其他键可以正常工作.这个问题在Firefox中不会发生,只是在chrome中,为什么？这是我的代码:

document.addEventListener('keypress', function (e) {
     console.log(e);
}, false);

对于自定义图像选择工具,我想基于html 5表单验证创建表单验证.

例如,我的表单由以下元素组成:

<form class="cms-form" action="">
    <table width="800">
        <tr>
            <td width="30%">Name:</td>
            <td><input type="text" name="name" class="cms-input-text" maxlength="127" /></td>
        </tr>
        <tr>
            <td>Image:</td>
            <td><textarea name="icon" class="cms-input-file" data-file-resource="images" data-options="{&quot;min&quot;:1,&quot;max&quot;:3}">/location-to-image.png</textarea></td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Next"/></td>
        </tr>
    </table>
</form>

我有一个javascript,将textarea(.cms-input-file)更改为一些html来添加图像并隐藏原始文本区域.它看起来像这样:

<textarea name="icon" class="cms-input-file" data-file-resource="images" data-options="{&quot;min&quot;:1,&quot;max&quot;:3}" style="display: none;">/location-to-image.png</textarea>
<ul class="cms-input-file-list">
    <li class="cms-input-file-item" data-image="/location-to-image.png">
        <img src="/location-to-thumb.png" alt="" class="cms-input-file-item-thumbnail"/>
        <span class="cms-input-file-item-title">location to image</span>
    </li>
    <li class="cms-input-file-add">Add</li>
</ul>

由于我使用html5表单验证分配现有表单,因此我想在html5支持的浏览器中使用默认表单验证来验证此元素,但使用希望存在的事件.

我正在寻找这样的东西:

$('.cms-input-file').on('customValidateFunction', function () {
    var options = $(this).data('options');

    if($(this).find('> li.cms-input-file-item').length < options.min)
    {
        return [false, 'Add more images.'];
    } …

当用户在文本字段上按下转义键时,我想要做某事.只要在Safari和Firefox的输入框中按下Escape键,此代码27就会记录,但不会在Chrome中记录.我也尝试绑定keyup,而不是使用jQuery(即,只使用原始Javascript),并尝试使用keyCode而不是which,没有一个帮助.顺便说一句,Chrome似乎与Enter,修饰键等所有其他键完全一样.任何想法是什么？

注意:我在Mountain Lion上使用的是Chrome 22.0.1229.94.

更新:顺便说一句,如果它有帮助,当我在Chrome中的输入框上按下escape时,它会失去焦点而在其他两个浏览器上却没有.

有时用户会绑定事件$('body'),有时也会打开事件$(document)

$(document).on('click', someAction);

$('body').on('click', someAction);

有什么理由喜欢彼此吗？

我正在尝试为WinJS中的自定义事件编写事件处理程序.我不太确定这在IE中是如何工作的 - 我正在创建一个自定义事件并调度它 -

var eventObject = document.createEvent("CustomEvent");
eventObject.initCustomEvent("dropbomb", true, true, null);
this._element.dispatchEvent(eventObject);

我的经纪人是 -

this._element.addEventListener("logtelemetry", function () {
                console.log("boom");
});

我可以确定将同步调用处理程序而不是稍后调用吗？如果是,那么证据是什么.

我想显示和隐藏(切换)<table> onClick事件<a>.这是我的<a>标签

<a id="loginLink" onclick="toggleTable(true);" href="#">Login</a>

这是我的java脚本函数 toggleTable(hide)

   <script>
    function toggleTable(hide)
    {
    if (hide) {
       document.getElementById("loginTable").style.display="table";
       document.getElementById("loginLink").onclick = toggleTable(false);

    } else {
       document.getElementById("loginTable").style.display="none";
       document.getElementById("loginLink").onclick = toggleTable(true);
    }
   }
   </script>

这是我的<table>标签

<table id="loginTable" border="1" align="center" style="display:none">

第一次点击<a> link它显示我的表,但下次点击它时不会隐藏.我做错了什么.