我在拖放方面遇到问题。
\n\n我的问题是,当一个元素被放入 dropzone 时,它有时会被插入到另一个元素中,而不是 dropzone div 中。
\n\njsFiddle: http: //jsfiddle.net/kMbPF/
\n\n在示例中,您可以看到我将表格做得很大,这样就很容易看到这一点。当一个表被拖放到另一个表的顶部时,它不会与其他元素一起进入拖放区,而是被插入到另一个表的内部。
\n\n我有几个想法,但我不知道它们是否可行。其中之一是是否可以在放置区上插入一个大的 div,以确保元素始终放入其中。我将其视为几乎透明的层,它捕获元素然后将它们放置在放置区域中。
\n\n我的另一个想法是尝试从 div 获取所有数据,将其全部放入一个字符串中,并尝试解析它,然后将所有数据替换回拖放区。
\n\n您还会注意到,排序可以工作,但似乎只在 Firefox 中有效,而在 Safari 中则无效。这不是我最紧迫的问题,但如果您确实看到了一个修复程序,那就太好了!(排序仅适用于上部拖放区)我不想使用 jQuery。
\n\n代码:
\n\n<!DOCTYPE html>\n\n<html lang="en">\n<head>\n <title>Basic drag and drop example</title>\n\n <style>\n @CHARSET "UTF-8";\ntable.draggable-word {\n background-color: red;\n padding: 0px;\n border: 1px solid green;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n border-collapse: collapse;\n border-spacing: 0;\n padding: 0;\n margin: 0;\n line-height: 1;\n width: 100%;\n height:50px;\n}\n\n.drop-div {\n width: 150px;\n height: …Run Code Online (Sandbox Code Playgroud) 我在下面创建了一个简单的div演示,单击一次将不显示任何一个。
<div id="three" onclick="toggle2(event);return false;" style="background:#303; color:#FFF;">
function toggle2(e) {
var textx = (e.target) ? e.target : e.srcElement;
textx.style.display = "none";
console.log(e.target);
}
Run Code Online (Sandbox Code Playgroud)
我的问题是,如果我更换,有什么区别
<div id="three" onclick="toggle2(event);return false;" style="background:#303; color:#FFF;">
Run Code Online (Sandbox Code Playgroud)
与
<div id="three" onclick="toggle2(this);return false;" style="background:#303; color:#FFF;">
Run Code Online (Sandbox Code Playgroud)
两者对于我上面的示例都可以正常工作.....
我试图通过toggleClass而不是hide/show来改变它的位置来隐藏/显示导航.(我有我的理由.)
用于显示/隐藏此类事物的标准3 bar导航链接正好是位置切换后出现一个导航图标的位置.单击导航链接可将导航区域完美地定位到位置,但随后它还会单击出现在该处的图标并直接跳转到与该图标关联的新URL.但我只点击一次.
导航链接通过z-index位于导航图标下方.
我无法弄清楚如何使用这种语法取消绑定点击,我已经尝试了e.preventDefault和超时以及我发现的其他想法.什么都行不通.
这是我非常简单的js:
Template.header.events({
'tap #menulink': function(e) {
e.preventDefault();
$('nav').toggleClass('shownav');
}
});
Run Code Online (Sandbox Code Playgroud) 我是 CKEDITOR 的新手。对你们中的一些人来说,回答这些问题可能听起来毫无价值。但是,在过去的几个小时里,我一直在努力为我的问题寻找解决方案。
目的 :
我想一个事件侦听器添加到特定种类的元素(对于例如:span)
我试过的:
我使用contentDom由CKEDITOR,抛出的事件将事件侦听器添加到span元素。
问题 :
但是,将事件侦听器添加到span将适用于span当前在编辑器中可用的内容。但是,不适用于span用户将来创建的元素 ( )。我现在该怎么办?
我有一个列表,在这个列表中我试图在 keyisdown/onfocus/etc 时调用一个函数?这不会触发该功能:
<li onkeydown="myFunction()"></li>
Run Code Online (Sandbox Code Playgroud)
正常的 onclick 工作正常(在“点击上升”时调用该函数)并将触发该函数:
<li onclick="andrafarg()"></li>
Run Code Online (Sandbox Code Playgroud)
所以我的问题是:当列表被立即点击时,我如何调用这个函数?
我对JavaScript中的"Event Listener","Event Handler","Event Bubbling"和"Event Capturing"感到困惑.
我在互联网上搜索并查看了不同的网站但是,我仍然有一些问题了解一些差异甚至基本条件.
正如本文所述,创建事件处理程序并侦听事件.
此外,在这里我发现了"事件冒泡"和"事件捕获"之间的区别.此外,我前段时间已经阅读过dojo所有事件都被<body>标签捕获.
是否意味着DOM中的其余元素没有附加JavaScript?
更确切地说,如果一个事件将由父母通过"事件冒泡"处理,那么就没有必要为孩子们添加听众吗?
这些术语背后的确切定义是什么?
我正在尝试为类中的所有复选框添加事件列表器。我可以将事件侦听器添加到类中。如何添加到该类中的所有复选框?
var classname = document.getElementsByClassName("classname");
var myFunction = function() {
var attribute = this.getAttribute("data-myattribute");
alert(attribute);
};
for (var i = 0; i < classname.length; i++) {
classname[i].addEventListener('click', myFunction, false);
}
Run Code Online (Sandbox Code Playgroud) 我得到以下结构: - 嵌套UL
<ul class="depth-one">
<li>Category 1
<ul class="depth-two">
<li > Category 1.1</li>
<li> Category 1.2</li>
<li> Category 1.3</li>
</ul>
</li>
<li> Category 2
<ul class="depth-two">
<li>Category 2.1</li>
<li>Category 2.2</li>
<li>Category 2.3</li>
</ul>
</li>
<li>Category 3
<ul class="depth-two">
<li>Category 3.1</li>
<li>Category 3.2</li>
<li>Category 3.3</li>
</ul>
</li>
</ul>
Run Code Online (Sandbox Code Playgroud)
我用CSS应用了一条规则:
ul{
list-style: none;
padding:0;
margin:0;
}
.depth-one{
display:block;
}
.depth-two{
display:none;
}
Run Code Online (Sandbox Code Playgroud)
只留下显示的MAIN类别.
$(document).ready(function() {
$(".depth-one > li").click(function() {
selector = $(this).find(' > .depth-two');
if($(selector).css("display") == "none"){
selector.slideDown(800);
} else {
selector.slideUp(800); …Run Code Online (Sandbox Code Playgroud) 我知道jquery或zepto $(selctor).on(event, handler)会触发动态创建元素的事件.但我不使用jquery和zepto.我想从头开始编写我的代码,用于学习和轻量级.
我的代码中有很多sth.innerHTML=blabla和sth.appendChild(..)片段.我必须将事件绑定到它们.
我想要一个像这样的简单函数,
function $on(selector, eventType, handler) {
document.querySelectAll(selector).forEach(function(el) {
el.addEventListener(eventType, handler);
});
// on new DOM insert or replaced, let us call it newDom
newDom.querySelectAll(selector).forEach(function(el) {
el.addEventListener(eventType, handler);
});
}
Run Code Online (Sandbox Code Playgroud)
但我不知道jquery是否像这样工作,我想知道它,并完成我的功能.
我有一个名为name和attendance两列的表,这是一个单选按钮,我想实现每当我点击一行时,我得到该行的名称和出勤的值.问题是每当我点击一行时,事件就会触发两次,并显示两次名称.我在下面添加了代码
<table class="col-md-12 text-center">
<tr>
<th class="text-center">Name</th>
<th class="text-center">Attendance</th>
</tr>
<tr class="" data-id='1'>
<td>Md. Khairul Basar</td>
<td class="form-inline table_attendance">
<div class="form-check form-check-radio">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadio"
id="exampleRadios1" value="option1">
<span class="form-check-sign"></span>
Present
</label>
</div>
<div class="form-check form-check-radio">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="exampleRadio"
id="exampleRadios2" value="option2" checked>
<span class="form-check-sign"></span>
Absent
</label>
</div>
</td>
</tr>
</table>
Run Code Online (Sandbox Code Playgroud)
以下是jQuery代码.
<script>
$(document).ready(function () {
$(".table_attendance").on('click', function () {
var attendance = {
name: $(this).closest("tr").find("td:nth-child(1)").text()
}
});
});
</script>
Run Code Online (Sandbox Code Playgroud)
我已经按照与此问题相关的其他答案添加了他们的解决方案,例如添加.off("click") …