相关疑难解决方法(0)

HTML5 拖放放置区

我在拖放方面遇到问题。

\n\n

我的问题是,当一个元素被放入 dropzone 时,它​​有时会被插入到另一个元素中,而不是 dropzone div 中。

\n\n

jsFiddle: 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)

html javascript css php drag-and-drop

3
推荐指数
1
解决办法
4487
查看次数

我应该在javascript中使用“ this”还是“ event.target”?

我在下面创建了一个简单的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)

两者对于我上面的示例都可以正常工作.....

javascript events this target

2
推荐指数
1
解决办法
4585
查看次数

流星点击发生两次

我试图通过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)

jquery click meteor

2
推荐指数
1
解决办法
651
查看次数

在插入 CKEDITOR 时向元素添加事件侦听器?

我是 CKEDITOR 的新手。对你们中的一些人来说,回答这些问题可能听起来毫无价值。但是,在过去的几个小时里,我一直在努力为我的问题寻找解决方案。

目的 :

我想一个事件侦听器添加到特定种类的元素(对于例如:span

我试过的:

我使用contentDomCKEDITOR,抛出的事件将事件侦听器添加到span元素。

问题 :

但是,将事件侦听器添加到span将适用于span当前在编辑器中可用的内容。但是,不适用于span用户将来创建的元素 ( )。我现在该怎么办?

events ckeditor

2
推荐指数
1
解决办法
1177
查看次数

如何调用 onkeydown/onfocus 到列表标签?

我有一个列表,在这个列表中我试图在 keyisdown/onfocus/etc 时调用一个函数?这不会触发该功能:

 <li onkeydown="myFunction()"></li>
Run Code Online (Sandbox Code Playgroud)

正常的 onclick 工作正常(在“点击上升”时调用该函数)并将触发该函数:

<li onclick="andrafarg()"></li>
Run Code Online (Sandbox Code Playgroud)

所以我的问题是:当列表被立即点击时,我如何调用这个函数?

html javascript jquery

2
推荐指数
1
解决办法
3472
查看次数

事件处理程序和监听器和事件冒泡和事件捕获

我对JavaScript中的"Event Listener","Event Handler","Event Bubbling"和"Event Capturing"感到困惑.

我在互联网上搜索并查看了不同的网站但是,我仍然有一些问题了解一些差异甚至基本条件.

正如本文所述,创建事件处理程序并侦听事件.

  • 这是否意味着,附加到DOM内部元素的JavaScript函数不是事件处理程序,它们是事件监听器?

此外,在这里我发现了"事件冒泡"和"事件捕获"之间的区别.此外,我前段时间已经阅读过dojo所有事件都被<body>标签捕获.

  • 是否意味着DOM中的其余元素没有附加JavaScript?

  • 更确切地说,如果一个事件将由父母通过"事件冒泡"处理,那么就没有必要为孩子们​​添加听众吗?

这些术语背后的确切定义是什么?

javascript jquery events dojo handler

2
推荐指数
1
解决办法
857
查看次数

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)

javascript

2
推荐指数
1
解决办法
3599
查看次数

绑定到LI的事件也由子元素的点击触发

我得到以下结构: - 嵌套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)

javascript jquery dom jquery-selectors

1
推荐指数
1
解决办法
170
查看次数

如何在没有jQuery或zepto的情况下处理动态创建元素的事件?

我知道jquery或zepto $(selctor).on(event, handler)会触发动态创建元素的事件.但我不使用jquery和zepto.我想从头开始编写我的代码,用于学习和轻量级.

我的代码中有很多sth.innerHTML=blablasth.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是否像这样工作,我想知道它,并完成我的功能.

javascript jquery

1
推荐指数
1
解决办法
585
查看次数

Click事件在表中被触发两次

我有一个名为nameattendance两列的表,这是一个单选按钮,我想实现每当我点击一行时,我得到该行的名称和出勤的值.问题是每当我点击一行时,事件就会触发两次,并显示两次名称.我在下面添加了代码

<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") …

javascript jquery click onclick

1
推荐指数
1
解决办法
226
查看次数