标签: javascript-events

有没有人知道一个跨浏览器,可靠的解决方案,用于在textarea字段中捕获tab键的按键,并替换(在正确的位置)4个空格？textarea用于输入一篇文章,需要这个功能.

注意:我尝试使用FCKEditor,其中没有捕获标签,并且有一些我不需要的功能.我想要一个简单的解决方案来捕捉标签.

我正在使用JQuery的手风琴模块编写表单向导.问题是我想覆盖手风琴菜单上的任何鼠标点击,以便在手风琴将显示下一部分之前首先验证表格.

我尝试过以下方法:

$('#accordion h3').unbind();

$('#accordion h3').click(function() {
  if (validate())
  {
    $("#accordion").accordion('activate', 2);
  }else
  {
    alert("invalid form");
  }
}

但上面的代码不起作用.无论表格是否有效,手风琴的内置点击事件仍会被调用,手风琴会显示下一部分.

我也尝试了以下代码:

$('#accordion h3').click(function(event) {
   if (validate())
   {
     $("#accordion").accordion('activate', 2);
   }else
   {
     alert("invalid form");
   }        
   event.stopPropagation();
});

但是stopPropagation()调用似乎根本不会影响手风琴的行为,无论表单是否有效,都会显示下一部分.

知道我可能做错了吗？

谢谢!

所以我有几个div叠加在一起,具有不同的z-index值.

浏览器的默认行为似乎是绑定到最顶层的z-index div的事件被触发.即我为每个div有一个onclicks,但只有当点击该区域时才会触发前一个.

有没有办法可以触发附加到所有div的事件,无论每个div的z-index是什么,只要行为超过该div而不考虑z-index？

有没有一种简单的方法可以知道DOM何时被更改？

是否有任何内置的JavaScript/jQuery事件/函数？

基本上我要做的是创建一个网站,其主页上包含所有内容,但任何时候只能看到一些内容.我这样做的方式是通过切换可见性.

我遇到的问题是:假设主页,当你第一次访问网站时是空白的(我希望它的方式).让我们说你点击"关于我们"链接.突然之间,关于我们的部分变得可见(我希望它的方式).现在我遇到的问题是,当我知道让我们说点击"产品"链接时,我希望"产品"内容变得可见,"关于我们"内容再次变得不可见.(基本上创造了在同一页面中打开新页面的错觉)

这是我到目前为止提出的代码.我可以使某些div元素可见和不可见(onclick)但我无法弄清楚如何确保任何时候只能看到一个div元素.

<script type="text/javascript">
function toggleVisibility() {
document.getElementById("about").style.display = "";
if(document.getElementById("about").style.visibility == "hidden" ) {
    document.getElementById("about").style.visibility = "visible";
}
else {
document.getElementById("about").style.visibility = "hidden";
}
}
</script>

<script type="text/javascript">
function toggleVisibility1() {
document.getElementById("products").style.display = "";
if(document.getElementById("products").style.visibility == "hidden" ) {
    document.getElementById("products").style.visibility = "visible";
}
else {
document.getElementById("products").style.visibility = "hidden";
}
}
</script>

使javascript工作的链接如下所示:

<href ="#"onclick ="toggleVisibility();">关于

<href ="##"onclick ="toggleVisibility1();">产品

<html>
<head>
<title>FML</title>

<script type="text/javascript">

function function1(e, div) {
div.innerHTML="this works"
document.getElementById('myspan').innerHTML= 'x-pos on click: ' + e.clientX
div.addEventListener("mousemove", function(){test(event, this)}, true);
}

function test(e, div) {
div.innerHTML+='<br/>so does this'
//This doesn't work. Can't add event as a parameter to function that has to be executed when using addEventListener
document.getElementById('myspan2').innerHTML= 'y-pos on move: ' + e.clientY
}

</script>
</head>
<body>
<span id="myspan">&nbsp;</span>
<span id="myspan2">&nbsp;</span>
<div style="width:100px;height:100px;background-color:blue;overflow:hidden;"  onclick="function1(event, this)">
</body>
</html>

点击蓝色div.

我想添加事件mouseover,让它执行test() - 函数,该函数应该包含以下参数:this,event

当调用函数test(e,div)时,我不断在firefox和IE中遇到"event is undefined"错误,虽然具有讽刺意味的是它在Chrome和Safari中完美运行.

我可以通过addEventListener添加事件参数的任何方式吗？我可以在chrome和safari中使用window.event,但这是我想要的确切设置.我已经谷歌搜索和试用/错误一段时间了,没有成功...所以FML:/任何提示/提示/ ...除了拍摄自己的头部？

我知道jquery可能会解决所有这些问题,但我想在迁移到jQuery之前精通javascript.或者我应该迁移吗？ …

是否可以在Handlebars.js帮助器中使用jQuery创建元素并将事件处理程序附加到它们？我希望能够使用帮助器创建活动元素.

例:

Handlebars.registerHelper("button", function(title) {
    var button = $('<button>').text(title);
    button.click(function() {
        alert("Button " + title + " clicked.");
    });
    return $('<div>').append(button).html();
});

在把手模板中,我实例化按钮,如下所示:

{{{button "Click Me!"}}}

我知道这不行,因为jQuery的html()函数`删除'事件处理程序......但是简单地返回按钮显然也不起作用.Handlebars helpers应该能够返回DOM节点,但这是不可能的,对吧？我试图返回button.get(),但没有成功.

有任何想法吗？

我正在尝试为Safari编写一些用于处理'粘贴'事件的代码,但它似乎无法正常工作.根据WebKit的DOM参考,oncut,onpaste,和oncopy全部处理更多或更少诸如W3C剪贴板API暗示.但是,它不像我期望的那样工作.我正在粘贴图像数据,但据我所知,我遇到的问题适用于任何类型的粘贴.这个jsfiddle在Chrome中运行得很好,但在OSX上的Safari 6.0.4中却没有.

$(function () {
    console.log("ready");
    $("#pastearea").on("paste", function (e) {
        e.preventDefault();
        console.debug("testing paste in safari");
        var blob = e.originalEvent.clipboardData.items[0].getAsFile();
        console.debug(blob);
        var reader = new FileReader();
        reader.onload = readerLoaded;

        reader.readAsDataURL(blob);
    });
});

function readerLoaded(e) {
    $("#dest").attr("src", e.target.result);
}

我再次尝试使用普通的JS.仍然没有快乐:

<div id="pastearea" onpaste="plainjsOnPaste()" style="width: 100px; height: 100px; background-color: blue;"/>

function plainjsOnPaste(e) {
    console.log("blahblahblah");
    console.log(e);   
}

如果Safari存在一些问题,那么显然我不应该期望jQuery能够工作.据我所知,在第二次尝试(简单)中,我正在完成WebKit参考建议我应该做的事情,但它根本不起作用.这是Safari的一些已知限制,还是椅子和键盘之间的问题？

更新:似乎Safari没有实现W3C的Clipboard API工作草案.我正在研究解决方法,但如果有人知道我会喜欢听到它.

在处理另一个问题的答案时,出现了一个奇怪的错误,该错误与event匿名函数中可用的对象有关而没有被传入.在Chrome中,下面的工作正常,但FF会抛出错误.

$(document).ready(function() {
  $("#uspsSideboxTrackingClose").click(function() {
    event.preventDefault();
    console.log(event);
  });
});

铬:

火狐:

ReferenceError:未定义事件

众所周知

$("#uspsSideboxTrackingClose").click(function(event) { .. }

适用于两种浏览器.这是违规代码.这是Chrome或FF的错误,还是两种浏览器的预期行为？哪个浏览器是对的？

我正在尝试设置复选框列表的样式.我添加了我的样式,它们在渲染时显示正确.我想在单击复选框的标签时添加一个类.这是我的标记,这在jsfiddle中是相同的.您可以从我的小提琴中看到,只需单击一下即可注册两个点击事件.为什么？

HTML:

<ul>
    <li>
        <label for="test_0" class="">
            <input id="test_0" name="offering_cycle" type="checkbox" value="1"> Fall
        </label>
    </li>
    <li>
        <label for="test_1" class="">
            <input id="test_1" name="offering_cycle" type="checkbox" value="2"> Spring
        </label>
    </li>
    <li>
        <label for="test_2" class="">
            <input id="test_2" name="offering_cycle" type="checkbox" value="3"> Summer
        </label>
    </li>
    <li>
        <label for="test_3" class="">
            <input id="test_3" name="offering_cycle" type="checkbox" value="4"> Other
        </label>
    </li>
</ul>

CSS:

ul {
    list-style-type:none;
}
label {
    position:relative;
    display:inline-block;
    padding-left:27px;
    height:25px;
}
label:before {
    display:block;
    position:absolute;
    top:-2px;
    margin-left:-28px;
    width:18px;
    height:18px;
    background-color:#fff;
    border-radius:5px;
    border:1px solid #ccc;
    text-align: …